如何理解BFC原理？

一、理解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