CSS日常随笔:BFC块级格式上下文

概念

BFC 即 块级格式上下文.也就是独立的块级渲染区域，只有块级元素才能参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

原理

1. 块级元素会在垂直方向上一个接一个的放置.
2. 垂直方向上两个块级元素之间的距离由margin的值来确定.
3. 块级元素不与浮动元素重叠.
4. BFC是一个独立的容器,其中的子元素不会影响到容器外的内容.
5. 每个元素容器块。即使存在浮动也是如此；

作用

解决相邻元素边距重叠问题

设置BFC的方式

1. 设置float不为none
2. 设置overflow不为visible
3. 设置position为fixed,absolute
4. 设置display的值为table,inline-block,table-cell,flex,inline-flex