也许很多人都有这样的疑问,浮动从何而来?我们为何要清除浮动?清除浮动的原理是什么?本文将一步一步地深入剖析其中的奥秘,让浮动使用起来更加得心应手。
一、清除浮动 还是 闭合浮动 ?
很多人都已经习惯称之为清除浮动,以前我也一直这么叫着,但是确切地来说是不准确的。我们应该用严谨的态度来对待代码,也能更好地帮助我们理解开头的三个问题。
- 清除浮动:清除对应的单词是 clear,对应CSS中的属性是 clear:left | right | both | none;
- 闭合浮动:更确切的含义是使浮动元素闭合,从而减少浮动带来的影响。
我们来看看下面例子,清除浮动和闭合浮动:
CSS代码如下:
#main {width:300px;height:auto;padding:10px;background:#ccc;}
#main .left {width:100px;height:50px;background:red;float:left;}
#main .right {width:100px;height:50px;background:blue;float:left;}
#footer {width:300px;height:20px;background:green;}
HMTL代码如下:
<div id="main">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div id="footer"></div>
结果如图所示:
二、解决这种问题有几种方法:
-
在父级添加
overflow:hidden
优点:不存在结构和语义化问题,代码量极少
缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素 -
父元素也设置浮动(加个
float:left/right
)
优点:不存在结构和语义化问题,代码量极少
缺点:使得与父元素相邻的元素的布局会受到影响,不可能一直浮动到body,不推荐使用 -
父元素设置
display:table
优点:结构语义化完全正确,代码量极少
缺点:盒模型属性已经改变,由此造成的一系列问题,得不偿失,不推荐使用 -
使用
:after
伪元素
优点:需要注意的是:after
是伪元素,不是伪类(某些CSS手册里面称之为“伪对象”),很多清除浮动大全之类的文章都称之为伪类,不过csser要严谨一点,这是一种态度。
由于IE6-7不支持:after
,使用zoom:1
触发 hasLayout。
缺点:兼容性不是很好。 -
在浮动的元素后面添加空标签
<div class="clear"></div>
清除浮动
优点:简单明了
缺点:无意义的空标签,不利于语义化
小结
通过对比,我们不难发现,其实以上列举的方法,无非有两类:
其一,通过在浮动元素的末尾添加一个空元素,设置 clear:both属性,after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素;
其二,通过设置父元素 overflow 或者display:table 属性来闭合浮动。
相关连接:http://hi.baidu.com/dusongdeng/item/a2792bb7ed7241b2eaba9395
相关连接:http://www.qianduan.net/new-clearfix.html