你如何让浮动元素的父母崩溃？

尽管像<div>这样的元素通常会增长以适应其内容，但使用float属性可能会导致 CSS 新手出现一个令人吃惊的问题： 如果浮动元素具有非浮动父元素，则父元素将崩溃。

例如：

<div>
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>
    </div>

此示例中的父 div 不会展开以包含其浮动的子项 - 它将显示为height: 0 。

你怎么解决这个问题？

我想在这里创建一个详尽的解决方案列表。如果您了解跨浏览器兼容性问题，请指出它们。

解决方案 1

浮动父母。

<div style="float: left;">
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>
    </div>

优点：语义代码。
缺点：您可能并不总是希望父级浮动。即使你这样做，你是否漂浮了父母的父母，等等？你必须浮动每个祖先元素吗？

解决方案 2

给父母一个明确的高度。

<div style="height: 300px;">
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>        
    </div>

优点：语义代码。
缺点：不灵活 - 如果内容更改或浏览器调整大小，布局将中断。

解决方案 3

在父元素中添加 “spacer” 元素，如下所示：

<div>
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>
        <div class="spacer" style="clear: both;"></div>
    </div>

优点：直接编码。
缺点：不是语义; spacer div 仅作为布局黑客存在。

解决方案 4

将父级设置为overflow: auto 。

<div style="overflow: auto;">
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>        
    </div>

优点：不需要额外的 div。
缺点：看起来像一个黑客 - 这不是overflow财产的既定目的。

评论？其他建议？

答案

解决方案 1：

最可靠和不引人注目的方法似乎是这样的：

演示： http ： //jsfiddle.net/SO_AMK/wXaEH/

HTML：

<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>

CSS：

.clearfix::after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

通过一些 CSS 定位，您甚至不需要向父DIV添加类。

此解决方案向后兼容 IE8，因此您无需担心旧版浏览器失败。

解决方案 2：

已经建议对解决方案 1 进行调整，如下：

演示： http ： //jsfiddle.net/wXaEH/162/

HTML：

<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>

CSS：

.clearfix::after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
   *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );
}

.ie7-clear {
    display: block;
    clear: both;
}

此解决方案似乎向后兼容 IE5.5 但未经测试。

解决方案 3：

也可以设置display: inline-block; width: 100%;在不折叠的情况下模拟正常的块元素。

演示： http ： //jsfiddle.net/SO_AMK/ae5ey/

CSS：

.clearfix {
    display: inline-block;
    width: 100%;
}

此解决方案应向后兼容 IE5.5，但仅在 IE6 中进行了测试。

我通常使用overflow: auto技巧; 虽然这不是严格来说，溢出的用途，它是有点相关 - 足以令它容易记住，一定。在这个例子中， float: left本身已经被扩展用于各种用途，比溢出更重要。

而不是将overflow:auto放在父级上，而是将overflow:hidden

我为任何网页写的第一个 CSS 总是：

div {
  overflow:hidden;
}

然后我再也不用担心了。