2

清除一组浮点数最流行的方法是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 */

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

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

.group {
    display:inline-block;
}

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

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

4

1 回答 1

2

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

.group {
    overflow: auto;
}

overflow: hidden也会起作用。

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

有时这种方法不会强制旧版本的 IE 清除浮动（抱歉，我记不起具体的 IE 版本），在这种情况下你需要强制haslayoutIE。设置一个明确的宽度就.group可以了。但在大多数情况下，我发现这种方法“有效”。

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

于 2012-06-14T02:04:08.013 回答