布局：理解BFC

写在前面

昨天刚刚面试完，记起来被问到的一个问题。

存在两个左浮动元素，并且为它们设置左右margin，此时左边的浮动元素的右margin会和右边的左margin重合吗？

当时就懵比了。但是我回答的是会。本能的认为。
然后又被问，那垂直设置margin呢？我回答也是会。
我们现在可以来看一下

<div>float1</div>
<div>float2</div>

div {
  float: left;
  background-color: deeppink;
  margin: 0 5px;
}

显然是不重叠的。
至于上下margin

上下margin是不重叠的

为什么

《精通css》一书里写道，只有普通文档流中块框的垂直外边距才会发生外边距叠加，行内框，浮动框或绝对定位框之间的外边距不会叠加.

因此呢，上述的两个div都是float的，按上面所说，当然不会叠加。还有，垂直外边距才会叠加，就算是普通文本流上，水平外边距也不会叠加。

---

BFC

那为什么垂直方向会发生堆叠呢？这又跟BFC有什么关系？
满足下列条件即可触发BFC

可以看到，HTML也是一个BFC。再看BFC的布局规则

注意第2条，也就是说同属于同一个BFC的两个相邻的box垂直margin会发生堆叠。
刚刚两个浮动元素也属于同一个BFC啊，为什么不发生堆叠呢？
这是因为BFC只规定了box-level的布局方式。

---

BFC的用处

阻止margin重叠

刚刚说了，在同一个BFC下的两个相邻的box垂直方向的margin会发生堆叠。所以如果两个box不属于同一个BFC就不会发生堆叠了。
这个地方我自己也懵了很久，演示一下比较好理解。

<div>box1</div>
<div>box2</div>

body{
  margin: 0;
  padding: 0;
}
div {
  background-color: deeppink;
  margin:hEast)
}

如我们所想，发生了堆叠。
那么如何不发生堆叠呢，我一开始是这样想的，将box2的样式设置为overflow:hidden;不就好了。这样box2
就属另一个BFC啦。
于是我就这样做了，看看结果。

body{
  margin: 0;
  padding: 0;
}
div {
  background-color: deeppink;
  margin: 5px 0;
}
.box2 {
  overflow: hidden;
}

一点没变。
看了很多讲解，终于明白隶属于不同BFC是什么意思了——要是两个box属于不同BFC！
我刚刚的做法，只是让box2成为一个新的BFC，而没有让box1和box2属于两个不同的BFC内啊。
所以正确的做法是，给box2包一层div，给这层div触发BFC，这样box2就处于div这个新的BFC中，而box1还在html这个BFC中，自然margin不会折叠。

<div>box1</div>
<div class="wrap">
  <div>box2</div>
</div>

body{
  margin: 0;
  padding: 0;
}
.wrap {
  overflow: hidden;
  background-color: white;
}
div {
  background-color: deeppink;
  margin: 5px 0;
}

---

待更新~