清除浮动没有额外的标记

Question

我在这里阅读这个页面:http://robertnyman.com/2007/04/12/how-to-clear-css-floats-without-extra-markup-different-techniques-explained/关于清除浮动而没有额外的标记,但它没有提到我认为你能做的事情.

我是否正确地认为你也可以通过不浮动最后一个元素来清除浮动？

因此,如果你想浮动3个元素,你浮动前两个,不要浮动最后一个....最后一个仍然会漂浮,但后面的任何东西都不会？

Answer 1

如果容器中的元素设置为浮动,它们将会搞砸.

因为父级不知道浮动元素的高度(因为它不再在文档的流程中)

http://jsfiddle.net/CkdY6/

您可以做的最好的事情是将父元素设置为 overflow: hidden

http://jsfiddle.net/CkdY6/1/

但正如有人最近向我指出的那样,当你想使用像投影一样的CSS3时,它会搞砸.

http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/

Answer 2

大多数CSS"重置"样式表都有一个用于在元素后自动清除的类.例如,来自html5reset.org的这些规则允许您编写<div class="clearfix">your floats in here</div>:

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }