前言
上篇文章我写了BFC的作用，其中有一条就是避免被float元素遮盖(和清除浮动一样)。
坑在何处？
遍地可见的flex和grid
flex和grid属于很爽的那种布局方式，应该没人忍得住不用这玩意。
因此float的缺陷就来了。
float虽然会造成塌陷，但是有些时候我们并不希望解决这个塌陷，相反，我们想要利用它。
然而，flex和grid的出现，使得bfc遍地可见。那么float元素很有可能就遮不住其他元素，就好像从来没有脱离文档流那样。
BFC的表现就像是它也设置了float然后后面加一个清除浮动。
那么这样会存在一些问题，当flex后面的元素，是一个普通的block元素，那么它有可能处于前面的浮动元素之下。
正确的使用方式？
很简单，为了防止内部元素被外部浮动元素影响布局，父容器应当为BFC元素。
因此给parent加个overflow:hidden就能避免前面提到的不合理的现象。
BFC的核心就是这个，BFC盒子内的元素不会被外部元素影响。
层叠应该使用绝对定位
正如上面所说的特性，float在如今已经不适合用来搞层叠了，因为flex和grid遍地都是。
利用bfc去清除浮动
bfc元素不受浮动的影响，然而他并没有真正清除浮动，他后面的元素依然会跑到浮动元素的下面。
而清除浮动clear:both;会导致元素本身不受前面的浮动影响，可能造成布局问题，因此通常情况下，我们清除浮动都是用的空标签。
然而，bfc元素本身就不受浮动影响，因此完全可以在bfc元素上，写上clear:both;起到清除浮动的作用。
虽然这样写可读性可能会下降一些。
