清除浮动没有额外的标记

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; }