这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战
什么是BFC
BFC即Block formatting context的简称，它是网页中的一块渲染区域，而且它有一套进行渲染的规则，这个规则决定了渲染区域的子元素如何布局，以及元素之间的关系和相互作用。
BFC的特点
- BFC渲染区域是页面上的一个隔离的独立区域，独立区域里面的子元素不会影响区域外面的元素，同样外部的元素也不会干扰区域内部的元素。
- BFC渲染区域内部的盒子元素会在垂直方向一个接一个放置
- BFC渲染区域不会与浮动样式（float）的盒子叠加
- BFC渲染区域内部的两个相邻盒子元素垂直方向上的外边距（margin)会叠加
- 浮动元素参与BFC渲染区域高度的计算
如何触发BFC
满足以下任意一个条件就可以触发BFC：
- 根元素即HTML元素会触发BFC
- 使用绝对定位(absolute)和固定定位（fixed）会触发BFC
- 使元素浮动（设置float样式除none以外的值）会触发BFC
- 设置display为以下属性值会触发BFC：flex,inline-flex,inline-block,table-cell,table-caption
- 设置overflow为以下属性值会触发BFC：hidden,auto,scroll(除了visible意外的值)
BFC的应用场景
解决边距重叠问题
在设计网页时，如果想要垂直方向上的外边距不重叠，可以通过给其中一个元素加一个父元素，并触发父元素的BFC，这样两个div就不属于同一个BFC，因为BFC渲染区域是页面上的一个隔离的独立区域，所以垂直方向上的外边距就不会重叠，这样问题就解决了
用于自适应两栏布局
由于.left设置了浮动，产生了浮动流，导致两个元素叠在了一起，，触发.right的BFC来解决这个问题。
清除浮动
在父元素没有设置height，子元素又float的情况下，父元素不会被子元素撑开。这是因为设置了float的元素脱离了文档流，不在原来的父元素里了。同样可以通过触发父元素的BFC就可以解决这个问题。
解决高度塌陷
样式中给父元素（parent）设置了margin：100px，但发现上边距没有出来，这时就可以通过触发父元素的BFC来解决。
