BFC实际上是形成一个独立的区域，与外界元素互不影响。
触发BFC的条件可以有：
1. overflow不为visible
2. float不为none
3. position不为static或relative
4. display为table-cell、flex、inline-block、inline-flex
BFC能解决的问题：
浮动元素造成父元素高度塌陷
其他解决方式：为父元素设置浮动；为父元素设置高度；在最后一个浮动元素后添加空元素，并设置clear:both；为最后一个元素添加伪元素::after，并设置clear:both.
相邻div垂直方向的margin塌陷
其他解决方式：设置margin为padding
两栏自适应
在标准流中，块级元素会默认填满一行。所以设置左边元素浮动定宽，就可以实现两栏自适应。但是如果右边元素中的文本过多，使其高度超过了左边元素，就会造成文本环绕效果。所以使用BFC就可以让右边元素形成一块独立的区域。
其他解决方式：
设置左边元素浮动定宽，右边元素margin-left为左边元素的宽度；设置左边元素position:absolute且定宽，右边元素margin-left为左边元素的宽度；设置左边元素position:absolute且定宽，右边元素position:absolute，left为左边元素宽度，宽度为100%