BFC模式

BFC模式：BFC(block formatting context）:块级格式化上下文。如果一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)，是一个隔离了的独立容器。

一、 形成 BFC 的条件

1. 浮动元素，float 除 none 以外的值；
2. 绝对定位和固定定位元素，position（absolute，fixed）
3. display 为以下其中之一的值 inline-block，table-cell，table-caption
4. overflow 除了 visible 以外的值（hidden，auto，scroll）

二、 BFC的常见作用

1. 清除子元素浮动对父元素产生的影响
   子元素浮动，父元素高度（由子元素撑开）便会坍塌，给父元素overflow: hidden触发 BFC 可解决问题。
2. 不被同级浮动元素覆盖
   一元素浮动，其兄弟元素被覆盖。 给兄弟元素加 overflow: hidden 可解决问题。如果不加width，那么默认宽度为除去浮动元素的宽以后所剩余的宽度。
3. 阻止外边距折叠
   两盒子之间的外边距会以大的为准。给其中一个盒子加一个父元素，并设置 overflow：hidden 产生BFC解决问题。（可以解决上下两个盒子margin重叠问题）
   4、解决matgin塌陷