清除浮动clearfix

一直有在用，但是没有分析几种清楚浮动的方法和他们之间的比较。

为什么要清除浮动？

盒子里用了CSS float属性，父级对象不能被撑开。

这是6个float:left的<li>，父级<ul>添加上了边框，明显没有撑开。

这样的副作用是什么？

1. 背景效果出不来

2. 边框出不来

3. margin\paddding不正确

清除浮动的四种方法比较

1. 使用高度

   说明：在父元素上加个高度

   缺点：内容的高度必须确定而且计算好，如果以后要改变或者做自适应，就很麻烦。

   推荐指数：

2. clear:both;

   说明：先说说clear:both;：左右均不允许浮动元素。如果是clear:left;：左侧不允许浮动元素。clear:right;就不用说啦。然后，定义一个类是clear:both;属性，在浮动元素的最后添加一个空的标签，用上这个类，它就把整个父元素撑开了。

   缺点：需要在html里面多加标签

   推荐指数：

3. 父级定义overflow:hidden;

   说明：overflow:hidden;：。必须定义zoom:1;，zoom是IE的专用属性，本身作用是用来设置和检索对象的缩放比例，但基本用不动。可以用来清除浮动、解决margin导致的重叠问题。

   缺点：和position一起用的时候，有可能出现超出部分隐藏。而且，感觉zoom不是很规范。

   

   

   推荐指数：

4. 父级div定义伪类:after和zoom

   说明：

   这要开始详细的说了。我之前都是用overflow:hidden;，现在也开始用这种方法了。

   代码：

   .clearfix {
       *zoom:1;
   }
   .clearfix:after {
       display: block;
       clear: both;
       height: 0;
       font-size: 0;
       content: ' ';
   }
   

   :after选择器在Quirks模式在不支持的。

   因此需要zoom:1。

   一般这种方法可以放在定义公共类的CSS文件中。

   （博客主题没有加<code>和<pre>的CSS样式，先将就看看。）

   推荐指数：