共计 466 个字符，预计需要花费 2 分钟才能阅读完成。
什么是 BFC？
BFC（Block Formatting Context）块级格式化上下文，是一个独立的渲染区域，规定了外部的盒子如何布局，且不会被外界影响。在一个 BFC 中，行盒与块盒沿着父元素边框排列。
如何造成 BFC
- float 的值不是 none。
- position 的值不是 static 或者 relative。
- display 的值是 inline-block、table-cell、flex、table-caption 或者 inline-flex
- overflow 的值不是 visible
BFC 规定
- 外部的 Box 会在垂直方向，一个接一个地搁置。
- Box 垂直方向的间隔由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会产生重叠。
- 每个盒子（块盒与行盒）的 margin box 的右边，与蕴含块 border box 的右边相接触 (对于从左往右的格式化，否则相同)。即便存在浮动也是如此。
- BFC 的区域不会与 float box 重叠。
- BFC 就是页面上的一个隔离的独立容器，容器外面的子元素不会影响到里面的元素。反之也如此。
- 计算 BFC 的高度时，浮动元素也参加计算。
正文完