【前端三剑客——CSS】之BFC为何物

BFC

FC(格式化上下文)

formatting Contexts,是 W3C CSS2.1规范中的一个概念

是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相
互作用。

几种模式:

BFC

Block Formatting Contexts

页面上的一个隔离
的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。

IFC

Inline Formatting Contexts

IFC的line box (线框) 高度由其包含行内元素中最高的实际高度计算而来 (不受到竖直方向的padding/margin影响)。
IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间,便得line box宽度缩短。同个IFC下的多个line box高度会不同。

FFC

Flex Formatting Contexts

display 值为 flex 或者 inline-flex 的元素将会生成自适应容器(flex container) ，Flex Box由伸缩容器和伸缩项目组成。

通过设置元素的display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为flex的容器被渲染为一个块级元
素，而设置为inline-flex的容器则渲染为一个行内元素。伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目
可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。
简单地说, Flexbox定义了伸缩容器内伸缩项目该如何布局。

GFC (了解)

后期讲响应式 自适应 和移动端布局的时候进行补充GFC (GridLayout Formatting Contexts)直译为"网格布局格式化上下文"，当为一个元素设置display值为grid的时
候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器 (grid container) 上定义网格定义行
(griddefinition rows) 和网格定义列 (grid definition columns) 属性各在网格项目 (grid item) 上定义网格行
(gridrow) 和网格列 (grid columns)为每一个网格项目(grid item)定义位置和空间。
那么GFC有什么用呢,和table又有什么区别呢?首先同样是一个二维的表格,但GridLayout会有更加丰富的属性来控
制行列,控制对齐以及更为精细的渲染语义和控制。

BFC形成条件

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

用处：

• 常见的多栏布局,结合块级别元素浮动，里面的元素则是在一个相对隔离的环境里运行。
• 它决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用当涉及到可视化布局的时候
• BlochFormatting Context（BFC）提供了一个环境HTML元素在这个环境中按照一定规则进行布局
  通俗翻译下: 形成一个完全独立的大箱子 箱子中的子元素与外部元素隔绝开来 不管内部元素怎么搞 都不会影响到
  外部, 内部形成一个独立的文档流。

BFC特性

1. 盒子从顶端开始垂直地一个接一个地排列.
2. 盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
3. 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来
   说，则触碰到右边缘）
   • BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
   • 计算BFC的高度时，自然也会检测浮动的盒子高度。

BFC主要用途

清除浮动影响

处理外边距穿透\合并

实现两栏|三栏自适应布局