解决高度塌陷

如上图，给父元素设置边框不能把两个浮动的子元素包裹起来，俗称高度塌陷。解决高度塌陷最常用的方式就是－清除浮动

使用清除浮动解决高度塌陷有这么几种方案：

我们可以在box2后面再加一个box3，并把box3的clear属性设置为both;代码如下：

1
2
3
4
5
<div>
  <div style="float:left;"></div>
  <div style="float:left;"></div>
  <div style="clear:both;"></div>
</div>

这种方式多加了一个div。我们也可以另一种方式去更优雅的实现它。

使用伪类：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
.clearfix{
  *zoom:1;
}
.clearfix:after{
  content:"";
  display:block;
  clear:both;
}
</style>
<div class="clearfix">
  <div style="float:left;"></div>
  <div style="float:left;"></div>
</div>

跟第一种方式原理一样，只不过是巧妙的利用了伪类。

需要注意的是：伪类里的display属性不可以写inline，因为inline撑不起父元素。然后，ie6、7、8不支持伪类：after，所以我们设置 *zoom:1 来触发 ie6、7 的 haslayout 属性.（haslayout是关于ie低版本浏览器排版的一个属性,类似高级浏览器的BFC属性.）

我们还可以使用另一种神秘的方式去解决高度塌陷。总结了一下，分为四小类：

设置父元素float不为none;

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

设置父元素position为fixed或absolute；

1
2
3
4
<div style="position:fixed;">
  <div style="float:left;"></div>
  <div style="float:left;"></div>
</div>

display为inline-block, table-cell, table-caption, flex, inline-flex;

1
2
3
4
<div style="display:inline-block;">
  <div style="float:left;"></div>
  <div style="float:left;"></div>
</div>

overflow不为visible;

1
2
3
4
<div style="overflow:hidden;">
  <div style="float:left;"></div>
  <div style="float:left;"></div>
</div>

其实自由最后一类对父元素的设置还算无毒无害，应用场景最多。

但是说了这么多，你知道为什么这四种方式可以解决父元素的高度塌陷吗？知道最好，如果不知道说明你已定不了 解BFC的概念，BFC（Block formatting context)直译为”块级格式化上下文”。它是一个只有Block-level box参与独立的渲染区域。

BFC一个很重要的特性就是：计算BFC的高度时，浮动元素也参与计算。

利用这条特性，我们只要将父元素触发为 BFC就可以了。触发条件当然就是上述四条。