Question

有很多方法可以清除浮动，以确保包含所有后代的包含块包括漂浮的孩子。

使用标记：<div style="clear:both;"></div>
创建新的块格式化上下文：
- 浮动
- 绝对定位
- 的显示属性值为一个或多个异常属性（table-cell等）
- 溢出

我的问题是：还有其他方法吗？

非常感谢您的帮助！

Answer 1

您未提及的一些方法：

display: inline-block - 我不会将其视为"an unusual display value"，尽管它通常不会用于清除浮动因为它的副作用（例如收缩包装）：http://jsfiddle.net/CLXbc/ < / LI>

clearfix课程 - 这是一种常用技巧 - http://jsfiddle.net/CLXbc/1/

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
   j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }

到目前为止，最常见的两种方法是overflow: hidden和clearfix。

通过您的其他选项，这就是为什么它们不是最佳选择：

"using markup:<div style="clear:both;"></div>" - 这不是语义。在整个HTML中清空div是一个糟糕的选择。
"is floated" - 这样可行，但您通常不需要收缩包装。
"is absolutely positioned" - 您通常不希望您的元素绝对定位。
"has a display property value of one of more unusual properties(table-cell,etc.)" - display: table-cell在IE7中不起作用..再次，您不需要副作用。

在大多数情况下，我使用overflow: hidden。有时我不能使用它，for example here。在这些情况下，我通常会回溯到clearfix。

Answer 2

您可以将浮动元素的父元素设置为overflow:hidden;或overflow:auto;。

http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html

Answer 3

以下是关于Floats的精彩内容。甚至可以为长期的Web开发人员提供更多的洞察力。

http://css-tricks.com/all-about-floats/

清除浮动效应的方法

3 个答案: