Question

清除一组浮点数的最常用方法是在父{q}} {'1}}伪元素上使用clear:both;。例如：

:after

这在大多数情况下都可以正常工作，但是当浮动元素中浮动了元素时，它会失败。它会清除所有浮动，而不仅仅是子浮动。

一种可能的修复方法是添加

.group:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
    }
* html .group             { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */

但这会产生不必要的副作用。

有没有办法只清除子浮动，而不是清除页面上的每个浮点数？

Answer 1

我清除浮动的首选方法实际上是将包含元素的overflow属性设置为auto：

.group {
    overflow: auto;
}

overflow: hidden也可以。

这将强制.group清除任何浮动的子项，但它不会清除页面上的任何其他浮点数。我认为这可能是你想要实现的目标吗？

有时这种方法不会强制IE的旧版本清除浮动（抱歉，我无法回想起IE的哪个版本），在这种情况下你需要强制haslayout用于IE。在.group上设置显式宽度就可以了。但在大多数情况下，我发现这种方法“正常”。

以下是演示：http://jsfiddle.net/C7KWn/

清除儿童漂浮而不清除“外部”漂浮物

1 个答案: