CSS清除浮动

发表于 5年以前 | 总阅读数：4085 次

"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的结构是多变的。如果你也有清除浮动的好方法，欢迎提出，共同探讨。