CSS 清除浮动

利用 overflow 清除浮动

在父级元素上添加一个值为 auto 的 overflow 属性，父元素的高度立即被撑起，将浮动元素包裹在内。看起来，浮动被清除了，浮动不再会影响到后续元素的渲染（严格讲，这和清除浮动没有一点关系，因为不存在哪个元素的浮动被清除）。其实，这里的 overflow 值，还可以是除了 "visible" 之外的任何有效值，它们都能达到撑起父元素高度，清除浮动的目的。不过，有的值可能会带来副作用，比如，scroll 值会导致滚动条始终可见，hidden 会使得超出边框部分不可见等。

利用额外标签清除浮动

在浮动元素后添加清除浮动的块级元素
下面三种写法都适用：

1. <div style="clear:both"></div>

2. .clear { clear:both }
    <div class="clear"></div>

3. .clear { clear:both }
    <br class="clear" />    <!--也可以使用 br 等别的块级元素来清除浮动-->

利用 after 伪元素清除浮动

原理和额外标签一样，after 是在父元素中加一个盒子，这个元素是通过 CSS 添加上去的，父元素中加一个类名 clearfix。
但是这个方法 IE6、7 不识别，要进行兼容，使用 zoom:1 触发 hasLayout 来清除浮动

.clearfix::after {
    content:".";  /*尽量不要为空，一般写一个点*/
    height:0;     /*盒子高度为 0，看不见*/
    display:block;    /*插入伪元素是行内元素，要转化为块级元素*/
    visibility:hidden;    /* content 有内容，将元素隐藏*/
    clear:both;
}

.clearfix {
    *zoom: 1;    /* *只有 IE6、7 识别 */
}