浅谈BFC

程序设计之道无远弗届，御晨风而返。———— 杰佛瑞 · 詹姆士

前面文章提及到了BFC这个问题，这篇文章就谈谈我个人对BFC的理解。

BFC是什么？

首先说一下BFC是什么，概念从哪里来？BFC全称叫做（Block Formatting Context）中文叫块级格式化上下文，是一个网页的概念。网页是一个一个盒子组成的，那么这个BFC到底有什么用途呢？看下面具体分析。

---

怎么触发BFC

1. 浮动元素：float 除 none 以外的值。
2. 绝对定位元素：position (absolute、fixed)。
3. display 为 inline-block、table-cells、flex。
4. overflow 除了 visible 以外的值 (hidden、auto、scroll)。

---

遇到哪些问题需要用到BFC

在网页制作过程中由于浏览器加载是自上而下的原因（也可能是其他原因，个人是这么理解），外边距上下会取最大值，左右不影响，所以会导致以下局面。

html
<div class="demo1"></div>
<div class="demo2"></div>
css
.demo1{width: 200px;height: 200px;background-color: red;margin-bottom: 20px;}
.demo2{width: 200px;height: 200px;background-color: black;margin-top: 30px;}

浏览器解析的时候会使外边距叠加在一起，这时候就是遇到了BFC的问题，那么就要通过触发BFC来解决这个问题。

html
	<div class="demo1"></div>
    <div class="box">
    <div class="demo2"></div>
    </div>
css
.box{position :absolute;}
.demo1{width: 200px;height: 200px;background-color: red;margin-bottom: 20px;}
.demo2{width: 200px;height: 200px;background-color: black;margin-top: 30px;}

给其中一个子元素讨一个DIV，通过给这个DIV设置属性触发BFC就可以解决问题。

高度塌陷

在举一个例子理解BFC。

html
<div class="box">
    <div class="demo"></div>
</div>
css
.box{width: 300px;height: 300px;background-color: black;}
.demo{width: 100px;height: 100px;background-color: red;margin: 20px;}

这个时候红色DIV左右外边距并没有重叠 但是上外边距和父级重叠在了一起，这时候就要触发BFC来解决这个问题。

html
<div class="box">
    <div class="demo"></div>
</div>
css
.box{width: 300px;height: 300px;background-color: black;overflow: hidden;}
.demo{width: 100px;height: 100px;background-color: red;margin: 20px;}

通过触发BFC就可以解决高度塌陷的问题。到这里有没有对块级格式化上下文有没有一定的了解，如果还有一定的迷惑可以多多查阅资料，书籍是人类进步的阶梯！

---