什么是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的高度时，浮动元素也参加计算。