【前端面试-BFC】

什么是BFC

1. BFC是一个独立的布局环境，内部元素的布局和外部元素互不影响
2. 可以通过一些条件触发

如何触发BFC

1. 根元素（在整个文档流中没有父元素）
2. float不为none
3. position不为static或者relative
4. display不为inline-block、table-cell、table-caption、flex、inline-flex
5. overflow不为visible

BFC的特性

1. 同一个BFC中两个相邻的容器的margin会重叠
2. 浮动元素也参与BFC高度计算
3. BFC区域不与浮动容器发生重叠
4. 内部容器在垂直方向会依次排序
5. 元素的margin-left和border-left的内部相接触
6. 是独立容器：内部元素不影响外部元素

使用场景

1. 解决margin重叠
2. 实现多栏布局
3. 解决高度坍塌：
   对子元素设置float时，会脱离文档流，出现高度塌陷
   解决：
   (1)对父元素设置display：inline-block，此时父元素的高度和子元素一样
   (2)对父元素设置：overflow：auto或者hidden