BFC理解

BFC定义

BFC (Block formatting context) 直译为"块级格式化上下文"。它是一个 独立的 渲染区域，只有Block-level box（块级box）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

也就是说，BFC就是一类有自己渲染规则的渲染区域，它的渲染规则规定了它的内部子元素的排列方式以及和其它元素之间的关系，所以下面来看看他的渲染规则。

BFC渲染规则

• 内部的Box会在垂直方向，一个接一个地放置
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
• 每个元素的margin box的左边， 与包含块border box的左边相接触 (对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素也参与计算

怎么变成BFC?

• 根元素
• float属性不为none
• position为absolute或fixed
• overflow不为visible
• display为inline-block,table-cell,table-caption,flex

BFC的用处

BFC主要就是用在margin重叠、父元素塌陷以及div内容被float元素覆盖这几个问题上，如下：

• 父元素高度塌陷（可以包含浮动元素）

  • 场景：父元素高度为auto，其子元素又为浮动元素
  • 原因：浮动元素脱离文档流，普通块级元素在计算高度时，不计入到内
  • 解决：将父元素变为BFC（参考上条）
  • 原理：BFC渲染最后一条 —— 计算BFC的高度时，浮动元素也参与计算

• 元素之间margin重叠

  • 原因：属于同一个BFC的两个相邻块级子元素的上下margin会发生重叠
  • 解决：当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠
  • 原理：属于同一个BFC的两个相邻Box的margin会发生重叠

• 内容被浮动元素遮盖（两栏、三栏（某栏）自适应布局）

  • 原因：浮动元素脱离文档流，不受其他普通文档流的元素影响
  • 解决：设置被遮挡元素为BFC
  • 原理：BFC的区域不会与float box重叠