集合！！！——CSS中BFC机制详解，彻底吃透BFC机制

BFC概念：

（Block Formatting Context，BFC）块级格式化上下文，触发bfc机制的盒子内部会独立渲染，不会影响外部元素的布局也不会收到外部元素的影响。简单来讲就是CSS中有几种文档流模式决定了元素如何布局，有时包含块中的元素会受到外部元素影响，或影响外部元素的布局，此时我们想解决这种影响就可以使包含块创建BFC形成一个独立的布局环境（下面会举例子）。

---

几种文档流：

提示：先来介绍理解下CSS中的几种文档流

• 普通文档流：元素从上至下，从左至右依次排列。块级元素独占一行可以理解为从上至下的排列，行内元素则从左至右排列直至站满一行后换行继续排列。这种就是普通文档流排列模式。
• 浮动流：元素设置float：left或right属性。此时元素将会浮动起来靠左或者靠右进行排列。浮动元素会在原来的文档流位置进行浮动，所以属于半脱离文档流。且浮动的元素会造成父级元素的高度塌陷。
• 定位流：元素设置position:absolute或fixed属性。此时元素会找到最近的有定位的父级作为参照，没有则参照body。设置绝对定位和固定定位的元素会完全脱离文档流，按照给定left、right、top、bottom进行位置

---

如何触发BFC：

1. 浮动元素（元素的float不是none）。

2. 绝对定位元素（元素的position是absolute或fixed）。

3. 非inline元素且overflow值不是visible的块级元素。

4. 内联块元素（元素的display是inline-block）。

5. 表格单元格（元素的display是table-cell，例如<td>或<th>）。

6. 表格标题（元素的display是table-caption，例如<caption>）。

7. anonymous table objects（匿名表格对象）。

8. 嵌套的 flex containers（元素的display是flex或inline-flex）。

---

BFC的特性：

1. 内部的元素会在垂直方向上一个接一个地排列。

2. 每个元素的左外边距会与包含块的左边界相接触（即使存在浮动元素）。

3. BFC的区域不会与float元素区域重叠。

4. 计算BFC的高度时，浮动元素的高度也会被计算在内。

5. 内部的元素对外部世界影响（外边距折叠等）。

---

BFC的应用场景：

        一、实现两栏自适应布局(左侧固定宽度，右侧内容自适应宽度)。

二、清除浮动，解决浮动元素带来的父级元素高度塌陷问题。

效果却是wrap元素高度没有被撑开，原因就是left设置了浮动造成父级元素高度塌陷

清除浮动后wrap被浮动的left元素高度撑开了

三、解决外边距合并问题

        3.1 直接看例子

显然box2的margin-top没有生效，这不是我们想要的效果，这就是外边距合并问题，解决也很简单就是让box1创建BFC形成独立布局环境。

解决后的效果。

3.2 还有一种同一个BFC下的两个相邻元素的垂直外边距合并问题。

原因：同一个BFC下的两个相邻元素会发生垂直方向的外边距合并，两个不同BFC下的相邻元素不会发生垂直方向的外边距合并。

解决：将两个box放在不同的BFC下

结语：以上是我参考文档和结合工作经验的总结，欢迎各位码友改正和补充。