html - 你如何防止 float 元素的 parent 崩溃？

Question

这个问题在这里已经有了答案:

What methods of ‘clearfix’ can I use? (29 个回答)

关闭 7年前。

虽然像 <div> 这样的元素s 通常会增长以适应其内容，使用 float属性可能会给 CSS 新手带来一个令人吃惊的问题:如果 float 元素有非 float 的父元素，则父元素会崩溃。

例如:

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

本例中的父 div 将不展开以包含其 float 子元素 - 它似乎有 height: 0 .

你如何解决这个问题？

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

解决方案 1

float 父级。

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

优点:语义代码。
缺点:您可能并不总是希望 parent float 。即使你这样做了，你会 float parent 的 parent ，等等吗？你必须 float 每个祖先元素吗？

解决方案 2

给 parent 一个明确的高度。

<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>

优点:代码简单。
缺点:没有语义；间隔 div 仅作为布局技巧存在。

解决方案 4

将父级设置为 overflow: auto .

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

优点:不需要额外的 div。
缺点:看起来像个 hack - 这不是 overflow属性(property)的既定用途。

评论？其他建议？

Answer 1

解决方案 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%; 来模拟正常的 block 元素而不折叠。

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

CSS:

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

这个解决方案应该向后兼容 IE5.5，但只在 IE6 中测试过。