关于BFC

关于BFC

BFC：块级格式化上下文。
BFC是一个完全独立的空间，让空间里的子元素不会影响到外面的布局，页面中的一个隔离的独立容器。

BFC布局与普通文档流布局区别
普通文档流布局:
1、浮动的元素不会被父级计算高度；
2、非浮动元素会覆盖浮动元素；
3、嵌套的两个盒子的margin会塌陷；
4、上下相邻的margin会合并重叠；

BFC布局规则：
1、浮动的元素会被父级计算高度（父级元素触发了BFC），计算BFC的高度时，浮动元素也参与计算；
2、非浮动的元素不会覆盖浮动元素（非浮动元素触发了BFC）；
3、嵌套的两个盒子不会传递给父级（父级触发BFC）；
4、属于同一个BFC的两个相邻元素上下margin会重叠；

怎么触发BFC：几个触发BFC使用的CSS属性
1、overflow:hidden;
2、display:inline-block;
3、position:absolute;
4、position:fixed;
5、display:table-cell;
6、display:flex;

BFC可以解决的问题：
1、使用float脱离文档流，在父元素中的高度塌陷问题。
2、Margin边距重叠。
3、两栏布局。