前言
浮动 Floats 是 CSS 中的一种布局方式。它的渲染位置在行框与包含块之间，这样就可以使行框内文字与浮动元素不重叠并且环绕它显示。在布局过程中也经常会使用它来达到左右并排布局的效果。但是，由于浮动特性，容器如果没有明确设定高度，会依照普通流内元素高度设置，这样就会导致脱离普通流的浮动元素溢出容器，影响其后元素布局。
我们将现有已知的清楚浮动元素方法罗列下：
- 采用一个HTML标签，以及css的clear属性，来手工清理浮动；
- 采用伪类:after，动态建立一个块元素，设定 clear 属性，清理之前的浮动元素；
- 采用CSS overflow 非 visible 值(overflow:auto/overflow:hidden)设定使父容器包含浮动元素；
- 采用display:table/display:table-cell 等table系列属性将父元素变成 table 形式自动包含浮动元素；
- 使用 TABLE 以及 TD 标签作为浮动元素容器；
- 采用 float:left/float:right 方式将父元素同样浮动，就可以包含浮动内容；
- 在 IE 6/7 的标准文档模式中设置 “width/height/zoom” 等样式来自动清理浮动。
对这些方式我们一一来对照 CSS 标准（或者浏览器特性）来解释下。
使用 clear 样式清除
样例：
.clear-float {clear:both;}