css - 清除子 float 而不清除 'external' float

Question

清除一组 float 的最流行方法是在父元素的 :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 */

这在大多数情况下工作正常，但当 float 元素内有 float 元素时，它会失败。 它清除所有 float ，而不仅仅是子 float 。

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

.group {
    display:inline-block;
}

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

有没有办法只清除子 float ，而不是页面上的每个 float ？

Answer 1

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

.group {
    overflow: auto;
}

overflow:hidden 也可以工作。

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

有时此方法不会强制旧版本的 IE 清除 float (抱歉，我记不清具体是哪个版本的 IE)，在这种情况下，您需要强制 IE 的 haslayout 。在 .group 上设置显式宽度就可以了。但在大多数情况下，我发现这种方法“有效”。

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