对HTML中BFC的理解

BFC是块级格式化上下文，是一个密闭的空间，外面的元素不受影响

规则

1、里边的块上下排列
2、子元素左边外边距和父元素左边框相邻
3、垂直方向的margin值叠加
4、一个封闭的空间，外边的元素不受影响
5、BFC不与浮动元素重叠
6、父元素高度计算时，浮动元素参与计算

BFC展现出来的特性

1、内部的盒子会在垂直方向，一个接一个的放置
2、盒子垂直方向的距离有margin决定，属于同一个BFC的两个相邻盒子的margin值会发生 重叠
3、每个元素的margin box 的左边，与包含块border box 的左边相接触（对于从左往右的格式化，否则相反），即使存在浮动也是如此
4、BFC的区域不会与float box 重叠
5、BFC就是页面上的一个隔离的独立容器，容器内的子元素不会影响外面的元素，反之也如此
6、计算BFC高度时，浮动元素也参与计算

触发条件

1、html（根元素）
2、float不为none
3、position为absolute和fixed
4、display为inline-block table-cell flex
5、overflow为hidden scroll auto

BFC可以解决的问题

1、自适应两栏布局
2、防止margin上下重叠
3、父元素高度计算