理解块格式化上下文(BFC)

块格式化上下文对定位与清除浮动很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。

引自MDN:

块格式化上下文（block formatting context） 是Web页面的可视CSS渲染的一部分。它是块盒子的布局发生及浮动体彼此交互的区域。

简单来说，块格式化上下文就是块状元素定位的“语境”。

块格式化上下文由以下之一创建：

一个块格式化上下文包括创建它的元素内部所有不在新的块格式化上下文元素之内的内容。

举个?：

<div name="d1" class="container">
<div name="d2"></div>
<div name="d3" class="new-context">
  <div name="d4"></div>
</div>
</div>

1 2	.container {overflow: hidden} .new-context {overflow: hidden}

根据定义，以上class为container和new-context的div分别在其内部创建了新的块格式化上下文。d2,d3处于container所创建的上下文中，而d4处于new-context所创建的上下文中。

那么处于同一BFC下的块状有什么特性，我们又该如何加以利用呢？

用BFC取消垂直外边距合并

根据W3C：

在同一BFC中，各个块状元素的左边界与其包含块的左边界对齐（在从右往左读的格式中是在右边对齐）。在存在浮动的情况下，此规则依然有效（尽管元素的宽度可能会因为浮动缩小），除非该块状元素建立了一个新的BFC。

在同一BFC中，块状元素的垂直外边距会合并，比如：

<div class="container">
  <p>Sibling 1</p>
  <p>Sibling 2</p>
</div>

1 2	.container {background-color: blue; overflow: hidden;} p {background-color: green; margin: 10px, 0;}

按理说两个p标签之间的距离应该为20px，但实际上由于垂直外边距合并的存在，它们之间的距离是10px。

如果我们想取消这一现象，就可以创建一个新的BFC，将元素包含进去。

<div class="container">
  <p>Sibling 1</p>
  <p>Sibling 2</p>
  <div class="new-context">
    <p>Sibling 3</p>
  </div>
</div>

1
2
3

.container {background-color: blue; overflow: hidden;}
.new-context {overflow: hidden;}
p {background-color: green; margin: 10px, 0;}

这样第二个p和第三个p之间的距离就是10px + 10px = 20px。

在我们为元素设置浮动时，该元素会从文档流中删除，导致其包含元素的高度为0。一般通过设置clear来清除浮动，但新建BFC同样可以做到。

来看个例子：

<div class="container">
  <p>Sibling</p>
  <p>Sibling</p>
</div>

1	p {float: left;}

在上面的情况下，包含块的高度为0且不包含浮动的两个元素。我们通过创建一个新的BFC来解决这个问题：

1	.container {overflow: hidden}

这样浮动元素就回到了其正常文档流中，自然包含块也有了高度。