BFC

BFC 是 Block Format Context 的简写，译为块格式化上下文。

BFC 实现

overflow 和 clear

为父元素添加 overflow 或 clear 都可以创建 BFC:

.box-parent {
    overflow: auto;
}

或：

.box-parent {
    clear: both;
}

浮动

为元素添加浮动也会为元素创建 BFC。

.box {
	float: left;
}

定位

使用 position: absolute 或者 position: fixed 也会为元素创建 BFC。

display

使用 display:inline-block、display:table-cell 或者 display:table-caption，其中 table-cell 和 table-caption 是表格相关元素对应默认 CSS 值，所以当你创建表格时，每个表格的单元格都会自动创建 BFC 。

多列布局

另外当使用多列布局时，使用了 column-span:all 也可以创建 BFC。Flexbox 和 Grid 布局中的元素也会自动创建类似 BFC 的机制，只是它们被称为 FFC（弹性格式上下文）和 GFC（网格格式上下文）。这反映了它们所参与的布局类型。一个 BFC 表明他内部的元素参与了块级布局，一个 FFC 意味着它内部的元素参与了 Flexbox 布局。在实践中，这几种布局的结果是相似的，浮动元素会被包裹，外边距不会叠加。

常见场景

浮动元素超出父元素边界

浮动元素已经脱离了文档流，因此当父元素的高度不足以包裹这个浮动元素的时候就会出现浮动子元素超出了父元素边界的情况。但由于一些需求我们希望父元素能完全包裹子元素。

当盒子变成 BFC 之后，它内部的浮动元素就再也不可能突破它的底部

BFC 可以阻挡外边距叠加

一个 BFC 会停止去围绕浮动元素。

副作用

使用 overflow 创建 BFC 后在某些情况下可能会看到出现一个滚动条或者元素内容被裁切。这是由于 overflow 属性的设计是用来让你告诉浏览器如何定义元素的溢出状态的。浏览器执行了它最基本的定义。

因此应该使用一个没有任何副作用的属性，值得庆幸的是 CSS 工作组新定义了一个属性来实现这一目的：diaplay: flow-root

参考资料

理解CSS布局和BFC