BFC 块极化格式上下文学习笔记

发表于

Block fomatting context (简称BFC)

Box盒子定义

Box: 盒子，布局的基本单位。display ，决定盒子的类型

  • block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
  • inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context
  • run-in box:CSS3

布局规则：

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

BFC 生成条件

1
2
3
4
5
6
{
display:inline-block; /*inline-block/table-cell/table-caption/flex /inline-flex/flow-root*/
 position:absolute;  /*absolute/fixed/sticky*/
 overflow:hidden;/*scroll/hidden*/
 float:left;/*right/left*/
}

使用场景和案例

作用：避免margin穿透，清除浮动，阻止文本换行等
原理：

参考资料