关于css中的BFC

1、概念：Block Formatting Context（格式化上下文），表示一个独立的渲染区域或者隔离的容器。

2、形成BFC的条件

• 浮动元素，float 除 none 以外的值；
• 定位元素，position（absolute，fixed）；
• display 为以下其中之一的值 inline-block，table-cell，table-caption；
• overflow 除了 visible 以外的值（hidden，auto，scroll）；

3、BFC的特点

• 内部的盒子会在垂直方向上一个接一个的放置。
• 垂直方向上的距离由margin决定。
• bfc的区域不会与float的元素区域重叠。
• 计算bfc的高度时，浮动元素也参与计算。
• bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

4、解决问题

• 外边距折叠，一般文档流中，两个相邻兄弟元素之间的距离由较大边距元素决定，如果需要是他们距离为两个元素边距之和，可以将一个元素置于一个BFC中。
• 浮动元素遮挡非浮动元素内容，一般两栏或三栏布局中，左右元素浮动会遮挡中间元素部分内容，此时可以给中间元素开启BFC,解决遮挡。