在没有额外标记的情况下清除浮动答案

【问题标题】：Clearing floats without extra markup在没有额外标记的情况下清除浮动
【发布时间】：2023-03-21 07:02:02
【问题描述】：

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

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

所以如果你想浮动 3 个元素，你浮动前两个而不浮动最后一个....最后一个仍然会浮动，但之后的任何东西都不会？

【问题讨论】：

标签： html css xhtml css-float

【解决方案1】：

如果容器中的元素设置为浮动，它们就会搞砸。

因为父级不知道其中浮动元素的高度（因为它不再在文档流中）

http://jsfiddle.net/CkdY6/

你能做的最好的是将父元素设置为overflow: hidden

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

但正如最近有人向我指出的那样，当您想使用 CSS3 的东西（如投影）时，它会搞砸。

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

【讨论】：

【解决方案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; }

【讨论】：