什么是BFC,如何触发BFC,BFC有什么特性?

理解

1. BFC指的是块级格式化上下文,处于BFC内部的盒子与外界互不影响

触发条件

1. position:absolute/fixed都会产生bfc
2. display:inline-block,table,flex等
3. float:left/right 浮动也会产生bfc
4. html根元素也是bfc

bfc的特性

1. 属于同一个BFC下的盒子会垂直排列
2. 属于同一个BFC下的两个盒子的外边距会重叠,这也就是外边距重叠的问题,让两个盒子不在同一个BFC下就可以
3. 被浮动元素覆盖的问题,只需要给被覆盖盒子产生bfc就可以解决,因为bfc是不会被浮动元素覆盖的
4. BFC还可以解决高度塌陷的问题,一般父盒子不设置高度的话他会被子盒子的高度撑开,如果子盒子是一个浮动元素,则父盒子无法识别到子盒子的高度,形成高度塌陷的问题,这时候我们给父盒子产生bfc,BFC有一个特性就是可以识别到浮动元素的高度