概念
BFC 即 块级格式上下文.也就是独立的块级渲染区域,只有块级元素才能参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。
原理
- 块级元素会在垂直方向上一个接一个的放置.
- 垂直方向上两个块级元素之间的距离由margin的值来确定.
- 块级元素不与浮动元素重叠.
- BFC是一个独立的容器,其中的子元素不会影响到容器外的内容.
- 每个元素容器块。即使存在浮动也是如此;
作用
解决相邻元素边距重叠问题
设置BFC的方式
- 设置float不为none
- 设置overflow不为visible
- 设置position为fixed,absolute
- 设置display的值为table,inline-block,table-cell,flex,inline-flex