清除子浮动而不清除“外部”浮动

Question

清除一组浮点数最流行的方法是在父级的:after 伪元素上使用clear:both;。比如这个：

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

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

一种可能的解决方法是添加

.group {
    display:inline-block;
}

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

有什么方法可以只清除子浮动，而不是页面上的所有浮动？

Answer 1

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

.group {
    overflow: auto;
}

overflow: hidden 也可以。

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

有时这种方法不会强制旧版本的 IE 清除浮动（抱歉，我不记得具体是哪个版本的 IE），在这种情况下，您需要为 IE 强制使用 haslayout。在.group 上设置显式宽度即可。但在大多数情况下，我发现这种方法“有效”。

这是一个演示：http://jsfiddle.net/C7KWn/