css之BFC

文档流一般分为定位流，浮动流和普通流。
BFC(Block Formatting Context)块级格式化上下文，是用于布局块级盒子的一块渲染区域。有其规定的渲染规则，决定了子元素如何布局，以及和其他元素之间的关系和作用。MDN上的解释：BFC是Web页面 CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。
注意：一个BFC的范围包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。这从另一方角度说明，一个元素不能同时存在于两个BFC中。因为如果一个元素能够同时处于两个BFC中，那么就意味着这个元素能与两个BFC中的元素发生作用，就违反了BFC的隔离作用。

在常规流中，盒子一个接一个排列。

静态定位：position: static
盒子的位置在常规流布局里规定的位置。
相对定位：position: relative
盒子依旧处于常规流之中，相对于其正常位置进行定位，它的偏移位置由top、bottom、left、right属性定义。但依旧会保留原来的位置，其他常规流不可占用。
绝对定位：position: absolute
盒子从常规流中被移除，不影响常规流的布局，其定位相对于上级元素中最近的一个relativefixed、absolute，如果没有则相对于body。偏移位置由top、bottom、left、right属性定义。
**浮动：**浮动会导致常规流环绕在其周围，除非设置clear等清除浮动的属性。它不会直接影响块级元素的布局，但它会影响到行内元素的布局，使其围绕在自己周围，撑大父级元素，从而间接影响块级元素布局。

BFC触发方式

根元素：即HTML标签
浮动元素：float值为 left、 right
overflow值不为 visible，为 auto、scroll、 hidden
display值为 inline-block、 table-cell、 table-caption、table、 inline-table、 flex、 inline-flex、 grid、 inline-grid
定位元素：position值为 absolute、 fixed 注意
注意！！ display:table也可以生成BFC的原因在于Table会默认生成一个匿名的table-cell，是这个匿名的table-cell生成了BFC

浏览器对BFC区域的约束规则

1. 生成BFC元素的子元素会一个接一个的放置。
2. 垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素的外边距会折叠(Mastering margin collapsing)。
3. 生成BFC元素的子元素中，每一个子元素左外边距与包含块的左边界相接触（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。

解释：

1. 内部的Box会在垂直方向上一个接一个的放置
2. 内部的Box垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生折叠，不同BFC不会发生折叠。）
3. 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
4. BFC的区域不会与float的元素区域重叠
5. 计算BFC的高度时，浮动子元素也参与计算
6. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

BFC的作用

阻止元素被浮动元素覆盖

一个正常文档流的block元素可能被一个float元素覆盖，挤占正常文档流，因此可以设置一个元素的float、display、position值等方式触发BFC，以阻止被浮动盒子覆盖。

可以包含浮动元素

通过改变包含浮动子元素的父盒子的属性值，触发BFC，以此来包含子元素的浮动盒子。但此时这里触发BFC并不能阻止其它形式的脱离文档流的元素覆盖正常流元素。

阻止因为浏览器因为四舍五入造成的多列布局换行的情况

有时候因为多列布局采用小数点位的width导致因为浏览器因为四舍五入造成的换行的情况，可以在最后一列触发BFC的形式来阻止换行的发生。

阻止相邻元素的margin合并

属于同一个BFC的两个相邻块级子元素的上下margin会发生重叠，(设置writing-mode:tb-rl时，水平margin会发生重叠)。所以当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠。这里给任一个相邻块级盒子的外面包一个div，通过改变此div的属性使两个原盒子分属于两个不同的BFC，以此来阻止margin重叠。