BFC的理解
一、BFC概念
BFC即Block Formatting Contexts(块级格式化上下文)，它属于普通流。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其他子元素将如何定位，以及和其他元素的关系和相互作用。具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。
二、触发BFC条件（只要元素满足以下任意一条即触发BFC特性）
- body根元素
- 浮动元素：float除none以外的值
- 绝对定位元素：position(absolute,fixed)
- display为inline-block,table-cells,flex
- overflow除了visible以外的值（hidden,auto,scroll）
三、BFC特性应用
- 阻止垂直外边距（margin-top,margin-bottom）折叠（属于同一个BFC的两个相邻块级元素的上下margin会发生重叠，分为两个BFC就可以取消这种margin重叠，触发其中一个div的BFC，使得两个div的margin重叠）
- BFC可以包含浮动的元素（清除浮动）
- BFC可以阻止元素被浮动元素覆盖（在第二个元素中加入overflow:hidden）
