BFC-block-formatting-context-块级格式化上下文

元素开启 BFC 有什么用?

1. 开启 BFC 的元素不会被浮动元素覆盖
2. 开不启 BFC 的元素父子外边距会合并
3. 开启 BFC 的元素可以包含住子元素 (解决高度塌陷)

怎么开启 BFC?

1.float 浮动不是 none 的值
2.position 的值不是 static 或者 relative
3.display:inline-block table-cell table-caption flex inline-flex
4.overflow 不是 visible
            一般使用 overflow:hidden