浮动清除

1. 使用带 clear 属性的空元素

在浮动元素后使用一个空元素如 <div class="clear"></div> ，并在CSS 中赋予 .clear{clear:both;} 属性即可清理浮动。亦可使用 <br class="clear" /> 或 <hr class="clear" /> 来进行清理。

小结：

空元素：<div class="clear"></div>

CSS：.clear{clear: both}

2. 使用 CSS 的 overflow 属性

给浮动元素的容器添加 overflow:hidden;或 overflow:auto;可以清除浮动。

小结：

overflow: hidden

3. 给浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用

4. 使用邻接元素处理

什么都不做，给浮动元素后面的元素添加 clear 属性

5. 使用 CSS 的:after 伪元素

结合:after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。给浮动元素的容器添加一个 clearfix 的 class，然后给这个 class 添加一个:after 伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

小结：

:after伪元素