CSS清除浮动

原文地址：CSS清除浮动作者：最初的你

我们嘴里常说到的“清除浮动“，其实并不准确。准确的说法应该是“清除浮动”，真正的“清除浮动”是什么呢，float:none;这才是“清除浮动”的字面意思。当然，也有可能是“清除浮动”就是个简称，意思就是“清除浮动造成的影响”，只是叫了顺口，大家也都这么称呼了。

添加了浮动属性的元素会脱离文档流，不占据空间，这样的特殊性会给周边的普通流的元素带来一些影响，所以，清除浮动的工作就显得尤为重要。

我们看下面这段代码：

.box{background:#ccc;}

.box1{float:left;}

<divclass="box"><divclass="box1">北京日升广安房地产经纪有限公司成立于2004年，主要成员均来自房地产行业精英，拥有严谨的专业知识和丰富行业经验目前正值公司规模迅速发展扩大时期，诚招有志之士加入我们的团队。</div></div>

无一例外，当子元素box1浮动时，父元素并没有做到高度自适应，我们在所有的浏览器里都看到了同样的结果，那就是box的背景并没有显示，也就是说box的高度塌陷，box1摆脱了box的束缚，跑了出来（当我们为父div设置了高度或者浮动就不会出现这种情况了）。那如何清除box1的浮动产生的影响，让box正常显示，在视觉上包裹住box1呢，下面介绍三种方法，也觉得是比较常用的“清除浮动”的三种方法：

1.空div

 .clear{height:0;clear:both;overflow:hidden;}

   就是直接一个<divclass="clear"></div>(当然标签也可以是br、p，class名称也可以自由定义)当作最后一个子标签放到父标签那儿，此方法屡试不爽，兼容性强，使用方便，是初学时使用的上佳之选。但是同时也看到了巨大的浪费，浪费了一个标签，而且只能使用一次，我个人是无法容忍的，所以这个方法不推荐。而且有时候一不留神中间多了个空格会产生一段空白高度的。

2. overflow + zoom方法

.box{overflow:hidden;zoom:1;}

    为父标签box添加这两个属性。overflow是针对现在浏览器（包括ie7），而zoom主要是针对ie6设置的，如果父元素box定义了width值，那么在ie6中就会自动触发haslayout，也就不需要添加zoom属性了。

   此方法优点在于代码简洁，涵盖所有浏览器，可谓不错的选择啊。不过也是有问题的，就是这个     overflow:hidden;是个小炸弹，要是里面的元素要是想来个margin负值定位或是负的绝对定位，岂不是直接被裁掉了，所以此方法是有不小的局限性的。我一般不用这个方法，只是有时候顺便去除浮动时用用。

3. after+ zoom方法

.clearfix{zoom:1;}

.clearfix:after{display:block;content:'.'; clear:both; line-height:0;visibility:hidden;}

   先来简单讲讲after，所谓after，就是指标签的最后一个子元素的后面，他适用于除了ie6/ie7之外的现代浏览器。于是呢，我们可以用CSS代码生成一个具有clear属性的元素，其中的关键样式就是content了。或许您从网上看到的content里面的内容是”.”一个点，我了很多次，貌似随便写什么东西都没有问题，比如content:'clearboth';没问题，或是content:'佰亿'也是ok的。这里的line-height:0写成height:0也是可以的。此方法可以说是综合起来最好的方法了，不会影响任何其他样式，通用性强，覆盖面广，值得推荐。