如何防止浮动元素的父项崩溃？

Question

尽管像这样

的元素通常会增长以适应其内容，但是使用float属性会给 CSS新手带来一个惊人的问题：如果浮动元素具有非浮动父元素，则父元素会折叠。

例如：

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

在此示例中，父div 不会扩展为包含其浮动的子级-似乎有height: 0。

你怎么解决这个问题？
我想在这里创建一个详尽的解决方案列表。如果您知道跨浏览器的兼容性问题，请指出。

解决方案1

Float the parent.

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

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

解决方案2

Give the parent an explicit height.

<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仅作为版式hack存在。

解决方案4

将parent设置为overflow: auto。

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

优点：不需要额外的div。
缺点：好像是骇客-这不是overflow酒店的既定目的。

Answer 1

解决方案1：
最可靠，最简单的方法似乎是这样的：

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进行修改，如下所示：

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%;模拟正常的块元素。

CSS：

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

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