float:浮动,比如,默认的,我们知道,div是占满一行的,现在我们想把两个div显示在一行上,那怎么办呢
<div style="width:100px;">11111</div><div style="width:150px">2222</div>
这样我们就设置了两个div,一个宽度100px,一个宽150px,可预览一下,我们的div仍在两行上,那么怎么把它改到一行上呢,这儿就需要float,设置第一个div的float为left
<div style="width:100px;float:left;">11111</div><div style="width:150px">2222</div>
再预览,就可以看到,它们到一行上了。
clear是什么意思呢,clear是清除的意思,它有三个值,left,right,both
很好理解,如果设置了clear:left,它就不怕它的左边有float,同理clear:right,clear:both,是左右都不让有float
举个例子,还是上面的
我们设置第二个div的clear:left,也就是不让它左边有float
<div style="width:100px;float:left;">11111</div><div style="width:150px;clear:left;">2222</div>
我们预览一下,就可以看到,尽管第一个div已经float:left了,这两个div仍然在两行上,就是由于第二个div不让它左边有float
因为css的定义是后面的可以覆盖前面的.
转: CSS中float和clear的理解的更多相关文章
-
CSS中float和Clear的使用
CSS中float和Clear的使用 本文和大家重点讨论一下CSS中Float和Clear属性的使用,一个float对象可以居左或居右,一个设置为float的对象,将根据设置的方向,左移或右移到其父容 ...
-
关于css中float的理解
感觉css里的float是个非常神奇的东西,神奇之处在于,你知道它是什么意思,但是用的时候总是不知道怎么实现效果.又或者它会很容易地影响到别的元素和属性.所以今天打算尝试一下float的各种设置,看看 ...
-
CSS的float与clear
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...
-
CSS中float属性和clear属性的一些笔记
在学习CSS的最后一部分内容中,float属性和clear属性比较难以用语言描述,因此在笔记本中无法准确的记录这两个属性的用法.所以在博客园上以图文的形式记录这两种属性的特征,以备以后查阅. 首先,定 ...
-
解决CSS中float:left后需要clear:both清空的繁琐步骤(转)
之前,因为公司专门有CSS+DIV的切片设计师,所以我一直都是注重程序的设计与开发.现在,因为接了一些Web网站的项目需要制作,就在空闲时间学习起了CSS.Jquery. 现在,大部分的横排导航都 ...
-
解决CSS中float:left后需要clear:both清空
现在,大部分的横排导航都是通过 ul -> li *n -> a 来实现的.具我所知,要达到这种效果,有几种方法可以实现. 1.传统处理方式: li {float:left;}/*这样,对 ...
-
【深入BFC】 关于CSS中float布局,清除浮动,和margin合并的原理解析,解开你心中的那些困惑!
BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...
-
css中float left与float right的使用说明
转自:http://www.jb51.net/css/33740.html 脚本之家 No! 要注意以下几点: 1. 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block( ...
-
css中position:relative的真正理解
其实话说一直以来也没真正去理解好position:relative的用法的真实意义. 我想很多人实实在在用的多都是position:relative和position:absolute结合起来一起用的 ...
随机推荐
-
火狐下js的日期比较的方法
function tab(date1,date2){ var oDate1 = new Date(date1); var oDate2 = new Date(date2); if(oDate1.get ...
-
JDBC性能优化点
1). 指定数据库连接池中初始化连接数的个数
-
解决eclipse ctrl+鼠标左键不能用
选择[Window]菜单 Preferences ——>General——>Editors——>Text Editors——>Hyperlinking 把勾都点上,然后确定KE ...
-
csharp:Compare two DataTables to rows in one but not the other
/// <summary> /// 账面数据 Accounting /// </summary> /// <returns></returns> Dat ...
-
二维数组 string[,]
string[,] strArr = { {"101","电脑"}, ...
-
hbmy周赛1--C
C - Exam Time Limit:1000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Submit St ...
-
ORACLE sid,pid,spid总结
概念上:1.spid (system process id) 是操作系统层面的进程id .2.pid(process id) 这个是基于oracle的进程id个人理解为就是oracle给自己的进程 ...
-
set 数据类型
list => 允许重复的集合,可修改 tuple => 允许重复的集合,不可修改 dict set => 不允许重复的集合 .set 不允许重复的列表 1.创建 s = set() ...
-
Java 设计模式学习笔记1——策略模式(Duck例子)
0.假设现有工程(Duck)中遇到为类添加功能的问题,如何设计类添加新的功能? 1.利用继承提供的Duck(鸭子)的行为会导致哪些缺点? (1)代码在多个子类中重复 (2)很多男知道所有鸭子的全部行为 ...
-
使用vue-cli开发过程中如何把jQuery设置为全局
说明:vue-cli是vue快速构建项目的命令行式开发模式. vue主要针对数据层,更多的操作在数据上,很少在DOM上,偶尔也会需要操作DOM,偶尔也会用到JQ插件,下面简单说下如何在使用vue-cl ...