BFC意义

打破（文档）流 用于实现复杂布局
如果全部都是以默认的“流”来渲染，我们只能实现类似 W3C 那样的文档网页，但是，实际的网页是有很多复杂的布局的，怎么办?可以通过破坏“流”来 实现特殊布局。

定义

• Web页面中盒模型布局的CSS渲染模式

浮动 元素和 绝对定位 元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及 ** overflow** 值不为 visiable 的块级盒子，都会为它们的 内部内容 创建新的 BFC（块级格式上下文）。

即一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：

1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

1、BFC布局规则

• 内部的块级元素会在垂直方向，一个接一个地放置；

• 块级元素垂直方向的距离由margin决定。属于同一个BFC的两个相邻的块级元素会发生margin合并，不属于同一个BFC的两个相邻的块级元素不会发生margin合并；

• 每个元素的margin box的左边，与包含border box的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此；

• BFC的区域不会与float box重叠；

• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；外面的元素也不会影响到容器里面的子元素；

• 计算BFC的高度时，浮动元素也参与计算。

消除margin合并

要搞清楚为什么会发生margin合并。这些元素（包括兄弟、父子元素等）之间之所以会发生margin合并，是因为它们属于同一个BFC。
只要让它们不属于同一个BFC不就可以了？

我们来看在margin合并这篇博客中举过的一个例子：

// html

// cssbody{
  margin:0;
  padding:0;}.bro1{
  width:300px;
  height:200px;
  background:#ddd;
  margin-bottom:30px;}.bro2{
  width:200px;
  height:100px;
  background:pink;
  margin-top:20px;}

image.png

现在我们给.bro1新建一个BFC，并添加 overflow:hidden;，修改代码如下：
// html

// css
.special{
overflow:hidden;
}

结果：

image.png

margin 合并消除了！