雨夜带刀's Blog

CSS清除浮动

“90%的CSS布局的兼容问题都是浮动布局引起的”,这是我无意中听到某位前端人员的抱怨。

某位新手朋友经常问起我浮动布局的时候该如何清除浮动,我回答过N次,但这位新手朋友好像始终记不住,总是会在这里出问题,包括我自己也时常会在这个问题上纠结。上面提到的90%的这个概率可能并不准确,但也反映出了前端人员在这个问题上或多或少的要纠结一番,新手会时常犯难,老手也不一定就不犯傻。

我总结了一下以往几种清除浮动的方法,发觉方法还是挺多的,那么有没有一种最优的方法可以实现一劳永逸呢?且看下面的几种方法先。

空标签法

在浮动元素后加一个空标签,空标签上定义一个清除浮动的类:

<style type="text/css">
.clear{ clear:both; height:0;overflow:hidden;}
.float_left{ float:left; }
.float_right{ float:left; }
</style>
左浮动元素
右浮动元素

空标签法简单有效,对浏览器的兼容性也很不错,空标签也不一定限于div,也可以是其他的标签p、span、br,值得注意的是在标准浏览器下这个空标签必须是块级元素,比如在使用span的时候就得将它转换成块级元素(display:block),在IE6/7下内联元素也可以。空标签法由于使用起来简单,受到广大新手朋友的青睐,我也时常为了省事,用这种办法。空标签法的缺点就是要多加一个额外的标签,这样HTML代码看起来就不够优雅,如果浮动元素较多,那么空标签也会很多。

overflow

子级元素有浮动,可以给父级元素添加一个overflow:hidden或overflow:auto的CSS属性来清除浮动。

<style type="text/css">
.list{list-style:none;width:300px;}
.list li{overflow:hidden;}
.list a{ float:left; }
.list span{ float:right; }
</style>

该方法可以兼容标准浏览器以及IE7 ,对IE6无效。这个方法我平时用得比较多,但是也有个弊端,众所周知,使用了overflow:hidden或overflow:auto属性的CSS元素如果内部有元素要定位到外面来的话就很杯具了。

IE6/7的hasLayout

微软的IE6/7的渲染引擎都有hasLayout属性,很多兼容问题都是由此引起的,某些CSS属性触发了hasLayout也同样可以达到清除浮动的效果。结合上面提到的overflow,那么就可以实现兼容标准浏览器和IE6的清除浮动的效果。触发IE6/7的hasLayout的方法并可以用来清除浮动的方法有:

  • 1. 设置一个显式的高度或宽度(不能为auto)
  • 2. zoom:1
  • 3. display: slots online inline-block (hack形式)
  • 4. float:left/right (hack形式)

用上面无序列表的为例来清除IE6/7的浮动的话,上面列出的触发hasLayout的方法1、方法2、方法3都会有一个4px的下间距BUG,用*margin-bottom:-4px修复即可。

float

子元素有浮动,给父元素也添加一个浮动(float:left),在标准浏览器下和IE6/7/8下都有效,但是这个父级元素浮动了又得清除父级元素的浮动,所以该方法的应用场景很受限制,不推荐使用。

:after

:after是一个伪类元素,经常与content结合使用,用来给元素的后面添加内容,该方法用来清除浮动可以兼容标准浏览器和IE8,IE6/IE7无效。

<style type="text/css">
.box{
zoom:1; /*兼容IE6/7的清除浮动*/
}
/*兼容标准浏览器*/
.box:after{
 content:""; /*具体的值与清除浮动无关,尽可能的节省字符*/
 clear:both; 
 overflow:hidden; 
 height:0; /*0高度使其不占用布局空间*/
 display:block; /*设置成块级元素*/
 }
.float_left{ float:left;}
.float_right{ float:left;}
</style>

我个人理解该方法就是和空标签的原理一样,都是在后面添加一个清除浮动的元素,而该方法用的是CSS来生成“空标签”,不知道这样理解是否有误,如果哪位看客有更好的说法,望告知。

上面提到的方法都是各有优缺点,并没有一种“最优”的解决方法,可能看到这里发现有点被忽悠的感觉,只能说,清除浮动的这几种方法都要看实际的应用场合,因为HTML的结构是多变的。如果你也有清除浮动的好方法,欢迎提出,共同探讨。

原载于:雨夜带刀”s Blog
本文链接:http://stylechen.com/css-clear-float.html
如需转载请以链接形式注明原载或原文地址并转告本博。

“CSS清除浮动”目前已有 12 条评论

发表评论:

  • *
  • *
头像

雨夜带刀

主要折腾前端
现居北京