最简洁的CSS清除浮动的方法

关于浮动清理，我们拥有多种方法，包括使用`
`标签的`clear`属性，设置元素的`overflow`，以及利用空标签进行`clear:both`设置等。但考虑到兼容性和语义化问题，我们通常会采用如下流行的清理浮动代码：

```css

/ 清理浮动 /

.clearfix:after {

visibility: hidden;

display: block;

font-size: 0;

content: " ";

clear: both;

height: 0;

}

.clearfix {

zoom: 1;

}

```

这段代码的运作原理是在“高级”浏览器中使用`:after`伪类，在浮动块后面添加一个非`display:none`的不可见块状内容，并为其设置`clear:both`以清理浮动。对于IE6和7，我们通过为浮动块添加`hasLayout`属性，使其能够正常影响文档流。

现在，支付宝也采用了这种主流方式。而Nicolas Gallagher则提供了一个更为简洁的方案：

```css

.cf:before, .cf:after {

content: "";

display: table;

}

.cf:after {

clear: both;

}

.cf {

zoom: 1;

}

```

这个方案同样使用`:after`伪类来提供浮动块后的`clear:both`功能。不同之处在于，它选择使用`display:table`来隐藏空白，而非通过`visibility:hidden; height:0; font-size:0;`这样的技巧。

值得一提的是其中的`:before`伪类。它的主要作用并非清理浮动，而是处理元素顶部边距的折叠问题。虽然这种情况并不常见，但值得注意。当浮动创建块级格式化上下文时，如果浮动元素上的其他元素有`margin-bottom`，而该浮动元素有`margin-top`，它们之间的边距不应折叠。这种设计考虑到了边缘情况的解决方案，使得CSS更为完善和健壮。

以上内容，是对浮动清理方式的一种深入解读和，希望能帮助您更好地理解这一CSS技术细节。Cambrian渲染完成。