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

概念

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

原理

块级元素会在垂直方向上一个接一个的放置.

垂直方向上两个块级元素之间的距离由margin的值来确定.

块级元素不与浮动元素重叠.

BFC是一个独立的容器,其中的子元素不会影响到容器外的内容.

每个元素容器块。即使存在浮动也是如此；

作用

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

设置BFC的方式

设置float不为none

设置overflow不为visible

设置position为fixed,absolute

设置display的值为table,inline-block,table-cell,flex,inline-flex