介绍下BFC及其利用

定义

BFC（Block Formatting Context）翻译为『块级格式化上下文』。是一个独立的渲染区域，只有（Block-level box）块级盒子参加，BFC规定了外部盒子如何布局，以及盒子之间的关系和作用。

解释阐明

Box(盒子)

Box盒子是CSS 布局的根本单位，在CSS中咱们宽泛的应用两种『盒子』——块级盒子和内联盒子。HTML元素的类型和display属性，决定了一个Box（盒子）的类型。不同类型的Box（盒子），会参加不同的Formatting Context（格式化上下文）。

Formatting Context(格式化上下文)

Formatting Context（格式化上下文） 是页面中的一块渲染区域，它决定了子元素将如何布局，以及子元素之间的关系和作用。

Block Formatting Context，块级格式化上下文，是Formatting Context（格式化上下文）的一种类型，只有（Block-level-box）块级盒子参加；绝对应有Inline Formatting Context （IFC内联格式化上下文）。CSS3之后，还有GFC（Grid）和FFC（Flex）。

规定

  1. 外部的box会依照垂直方向叠放
  2. BFC是页面上一个被隔离的容器，BFC外部的子元素布局不会影响到里面的元素布局。
  3. 外部的box，垂直方向的间隔由margin来管制。
  4. 外部相邻Box的margin会产生重叠。
  5. BFC的区域不会与float box重叠
  6. 计算BFC的高度时，浮动元素也参加计算

利用

  1. 革除浮动（让浮动元素的父级触发BFC）
  2. 阻止同一个BFC内box外边距合并
  3. 自适应两栏布局
  4. 阻止元素被（float）浮动元素笼罩

如何创立(触发)BFC

  • 根元素
  • 浮动元素
  • 定位元素
  • 行内块元素
  • 表格单元格
  • 表格题目
  • overflow不为visible的块元素
  • display值为flow-root的元素
  • contain值为layout、content或paint元素
  • 弹性元素flex布局元素的间接子元素
  • 多列容器grid布局元素的间接子元素
  • ...

总结

BFC块级格式化上下文，简略来说是一个关闭的区域，这区域外面的盒子不会影响区域里面的布局。BFC区域内的盒子须要恪守一些布局规定，比方：盒子会依照垂直方向排，盒子垂直方向的间隔由margin管制，BFC 区域不与浮动框重叠，计算BFC的高度时，浮动元素也参加计算等。依据BFC的布局规定，BFC能够解决革除浮动，外边距合并等异样布局，也能够实现自适应两栏布局，阻止元素被浮动元素笼罩。创立(触发)BFC的条件有给元素增加overflow属性且值不为visible，float属性且值不为none，display属性值为：flow-root,inline-block,table-cell,table，table-row，flex，grid等。

参考链接

CSS of BFC

it邦——BFC

BFC in Css

https://www.programmersought.com/