共计 1353 个字符，预计需要花费 4 分钟才能阅读完成。
对于页面的布局，前端开发者都大略理解：block 元素占据网页一整行空间，从上到下排列；多个 inline 元素共享网页一整行空间，从左到右，超出横向空间时，则向下排列。但在开发页面时，会常常遇到浮动高度塌陷、垂直方向上的 margin 重叠 or 溢出等场景。尽管利用 CSS Hack 能够疾速解决问题，但其背地的原理始终没去了解。有时候某个 CSS Hack 还有副作用，尽管解决了问题，但又新增了其余问题；为此还须要减少一些 dom，导致代码比拟冗余，不利于后续的开发者浏览代码。下面说的场景，其背地原理都和 BFC 无关，接下来就好好理解一下 BFC。
什么是 BFC
BFC（Block formatting contexts），块级格式化上下文。它是独立的渲染区域，该区域内的子元素不会影响内部的元素。
BFC 布局特点
- 默认状况下，
BFC内的子元素（content+padding+border+margin）仅能在BFC的 content 区域内展现。 - float 元素也会决定
BFC的高度，从而撑起BFC的高度。
如何创立 BFC
- 根元素(<html>)
- 浮动元素（元素的 float 不是 none）
- 相对定位元素（元素的 position 为 absolute 或 fixed）
- 行内块元素（元素的 display 为 inline-block）
- 表格单元格（元素的 display 为 table-cell，HTML 表格单元格默认为该值）
- 表格题目（元素的 display 为 table-caption，HTML 表格题目默认为该值）
- 匿名表格单元格元素（元素的 display 为 table、table-row、table-row-group、table-header-group、table-footer-group（别离是 HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
- overflow 值不为 visible 和 clip 的块元素
- display 值为 flow-root 的元素，能够创立无副作用的 BFC
- 弹性元素（display 为 flex 或 inline-flex 元素的间接子元素）
- 网格元素（display 为 grid 或 inline-grid 元素的间接子元素）
除
display: flow-root办法之外，其余办法或多或少有副作用。因而除非有非凡场景须要，否则倡议应用display: flow-root创立 BFC。
BFC 的理论利用
革除浮动
有了 flex 布局之后，float 布局就很少应用了。但在某些文字布局场景下，float 布局还是有一席之位的。在 float 布局风行的时代，都须要解决高度塌陷的问题。接下来，咱们用 display: flow-root 来解决高度塌陷的问题。
入手试试看
阻止子元素的垂直方向 margin 塌陷
默认状况下，垂直方向上，子元素的 margin 会与父元素（no padding & border）的 margin 合并，或者子元素的 margin 显示在父元素之外。但这并不是咱们冀望的，咱们冀望子元素的 margin 显示在父元素的 content 范畴内。接下来，咱们用 display: flow-root 来解决这个问题。
入手试试看
总结
BFC 是页面上一个隔离的布局容器，容器里的子元素不会影响到容器外的元素。利用 BFC，能够很好地解决日常开发中的布局问题。