使用BFC块级上下文

开场一句话

所谓的BFC你可以把它看做是“井水不犯河水”，也就是说我们有两个元素它们各自拥有BFC，那么它们自身的任何设置的属性都不会影响到其它的元素，并且无论该元素里面的子元素怎样变化，都逃不出该父元素

利用块级上下文解决的问题

1. 父元素高度塌陷
   正如我们上面所说，如果我们的父元素没有开启BFC，如果子元素开启浮动，那么子元素的高度是不会将父元素撑开的，这样就会导致父元素高度塌陷，影响布局
   解决办法就是给父元素开启BFC，这样他的高度就不会塌陷，就能牢牢的包裹住子元素
2. 外边距重叠
   一般情况下，相邻元素（兄弟姐妹）如果处于相同块格式上下文中时，它们的垂直外边距会重叠，我们就可以给它们分别设置为BFC，这样就不会发生重叠的情况
3. 阻止文本换行，防止浮动元素遮挡文本
   有时，浮动div周围的文本会环绕在文本周围，但是在某些情况下，这是不希望的，我们可以给文本标签设置BFC，这样文本标签就不会再去环绕浮动标签了

如何设置BFC

⑴根元素或其它包含它的元素

⑵浮动 (元素的 float 不为 none)

⑶绝对定位元素 (元素的 position 为 absolute 或 fixed)

⑷行内块 inline-blocks (元素的 display: inline-block)

⑸表格单元格 (元素的 display: table-cell，HTML表格单元格默认属性)

⑹表格标题 (元素的 display: table-caption, HTML表格标题默认属性)

⑺overflow 的值不为 visible的元素

⑻弹性盒 flex boxes (元素的 display: flex 或 inline-flex)
notes1：以上的方法都或多或少因为本身的属性特性会产生副作用，酌情使用
notes2：display:flow-root时css新增的专门用来设置BFC的属性，但兼容性较差，酌情使用