什么是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来解决。