对于页面的布局，前端开发者都大略理解：block元素占据网页一整行空间，从上到下排列；多个inline元素共享网页一整行空间，从左到右，超出横向空间时，则向下排列。但在开发页面时，会常常遇到浮动高度塌陷、垂直方向上的margin重叠or溢出等场景。尽管利用CSS Hack能够疾速解决问题，但其背地的原理始终没去了解。有时候某个CSS Hack还有副作用，尽管解决了问题，但又新增了其余问题；为此还须要减少一些dom，导致代码比拟冗余，不利于后续的开发者浏览代码。下面说的场景，其背地原理都和BFC无关，接下来就好好理解一下BFC。

什么是BFC

BFC（Block formatting contexts），块级格式化上下文。它是独立的渲染区域，该区域内的子元素不会影响内部的元素。

BFC 布局特点

  1. 默认状况下，BFC内的子元素（content+padding+border+margin）仅能在BFC的content区域内展现。
  2. float元素也会决定BFC的高度，从而撑起BFC的高度。

如何创立BFC

  1. 根元素(<html>)
  2. 浮动元素（元素的 float 不是 none）
  3. 相对定位元素（元素的 position 为 absolute 或 fixed）
  4. 行内块元素（元素的 display 为 inline-block）
  5. 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
  6. 表格题目（元素的 display 为 table-caption，HTML表格题目默认为该值）
  7. 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（别离是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
  8. overflow 值不为 visible 和 clip 的块元素
  9. display 值为 flow-root 的元素，能够创立无副作用的BFC
  10. 弹性元素（display为 flex 或 inline-flex元素的间接子元素）
  11. 网格元素（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，能够很好地解决日常开发中的布局问题。