一、理解BFC概念
BFC是一个封闭独立的盒子，无论盒子里的元素怎么运作，都不会影响外部的元素，内部元素也不受外界干扰。
二、触发BFC的条件与作用
条件
1.float的值不为none
2.overflow的值不为visible
3.display的值为inline-block、table-cell、table-caption
4.position的值为absolute或fixed作用：
1.撑开父元素
2.清除浮动
3.防止外边距合并
三、BFC的应用
- overflow属性的元素和它的子元素之间的margin之间的外边距不会发生合并
Paste_Image.png
Paste_Image.png
- 解决浮动导致的高度塌陷问题（清除浮动）
浮动元素脱离了文档流，父容器感知不到它的存在，觉得里面什么东西都没有，而且父容器本身又没有设置高度，没有任何东西支撑，所以会高度塌陷。
此为父容器高度塌陷：
Paste_Image.png
解决方法：
1.bfc。使父容器形成bfc，包含住浮动元素。
Paste_Image.png
