BFC学习

什么是BFC

BFC全称是Block Formatting Context，即块格式化上下文。它是CSS2.1规范定义的，关于CSS渲染定位的一个概念。要明白BFC到底是什么，首先来看看什么是视觉格式化模型。

CSS中的三种布局模型

CSS中的三种布局模型：

1. 流动模型（Flow）在常规流中，盒一个接着一个排列;内联元素都会在所处的包含元素内从左到右水平分布显示。
2. 浮动模型（Float）它位于当前行的开头或末尾；
3. 层模型（Layer）绝对定位，相对定位，固定定位

BFC

它属于上述布局模式的流动模型。是W3C CSS2.1规范中的一个概念，决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的的一些特性。通俗一点来讲，可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

形成BFC的条件

只要元素满足下面任一条件即可触发BFC特性：

1. body 根元素
2. 浮动元素：float 除 none 以外的值
3. 绝对定位元素：position (absolute、fixed)
4. display 为 inline-block、table-cells、flex
5. overflow 除了 visible 以外的值 (hidden、auto、scroll)
6. 弹性盒 flex boxes (元素的display: flex或inline-flex)；

BFC的效果

BFC的最显著的效果就是建立一个隔离的空间，断绝空间内外元素间相互的作用。

1. 内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）；
2. 处于同一个BFC中的元素相互影响，可能会发生margin collapse；
3. 每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
4. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；
5. 计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；
6. 浮动盒区域不叠加到BFC上；

BFC常见作用

1. 阻止外边距折叠
2. 防止浮动引起的高度塌陷
3. 阻止元素被浮动元素覆盖