BFC(block formatting context)解析

来源:转载

块级格式化上下文

BFC是块级盒布局的出现的区域,也是浮动元素交互的区域。是一块独立的渲染区域,只有块级盒子参与,规定了内部块级盒子的布局,并且这块区域和外部无关。

对于定位(float)和清除浮动(clear)很有用。这两个样式规则只适用于处于同一BFC下的元素。

布局规则和特性

  1. 因为只有块级盒子参与,在Box内部垂直方向一个接一个放置。
  2. box在垂直方向的距离由margin决定,而同一个BFC的两个相邻Box会发生margin叠加。
  3. 每个元素的左边(包含margin-left)与包含块box的左边对齐,即使存在浮动也一样。
  4. BFC的区域不会与浮动盒子(float box)相叠加。
  5. BFC在页面就是一个隔离的独立容器,容器内部的子元素不会影响到外部的元素,反之亦然。
  6. 在计算BFC的高度时,浮动元素也参与计算。

触发BFC的条件

  1. 根元素或者其它包含它的元素。
  2. 浮动元素(元素的float的值不为none)。
  3. 绝对定位元素(元素的position的值为absolute或者fixed)。
  4. 内联块(元素具有display: inline-block)。
  5. 表格单元格(元素具有display: table-cell)。
  6. 表格标题(元素具有display: table-caption)。
  7. 具有overflow且值不为visible的块元素。

BFC应用

自适应两栏布局

每个元素的左边与包含块的左边对齐(规则3),出现下图的情况

此时只有aside属于一个BFC,当给main加上overflow:hidden;之后,触发了main元素的BFC,然后main不与浮动盒子相叠加(规则4),BFC是一个隔离的独立容器,不影响外界元素(规则5),所以aside和main就如下图所示。

清除浮动

将包裹元素的子元素设置为浮动元素,则子元素触发BFC,它们就脱离了包裹父元素,父元素高度塌陷,导致如下图所示。

再将包裹父元素设置overflow:hidden触发BFC,则它计算高度的时候包括浮动元素(规则6),出现下图

防止外边距重叠

先看一个外边距叠加的例子

p的高度为50px,上下外边距各为50px,那么上下两个p之间的距离应该为100px–两个p高度的距离,
但是并没有那么长的距离,这里就发生了外边距叠加。
现在再触发第一个p的BFC。将会有如下的结果。

可以看出外边距重叠问题解决了。

整个博客写下来加深了我对BFC的理解,以前是知其然不知其所以然,现在发现回过头去想这些问题,发现比以前的理解更深刻了,这里小小记录一下曾经不会或者理解不深刻的知识。

参考

  1. 块级格式化上下文
  2. BFC原理详解
  3. CSS之BFC详解

分享给朋友:
您可能感兴趣的文章:
随机阅读: