CSS的BFC块级格式化上下文

Block fomatting context 块级格式化上下文

简单理解就是具备BFC特性的元素, 就像被一个容器所包裹, 容器内的元素在布局上不会影响外面的元素。用自己话说就是生成一个与他人无关的盒子独立开来

BFC作用

1. 解决普通文档流块元素的外边距折叠问题

   也就是说, 之前遇到的上下margin会重叠问题

   解决方法:

   元素置于不同的BFC中进行隔离就可以解决

   

   image

2. 清除盒子内子元素的浮动问题

   image

   解决:

   在父元素里添加属性overflow: hidden会触发BFC, 和外部隔开, 内部规矩化

3. 被浮动元素遮挡问题

   解决:

   可以触发下方的元素, 对其添加属性overflow:hidden 触发BFC盒子模型

   image

   可以对demo2触发其BFC然后就不会遮挡

   image

BFC的创建方式

1. 根元素方式来创建, 也就是

   image

2. 通过浮动元素来创建

3. 通过绝对定位来创建

4. display 取值来创建

   • inline-block

   • table-cell

   • table-caption

   • flex/ inline-flex

5. overflow 不为visible就可以创建 !!

详细可查看文章:https://juejin.im/entry/59c3713a518825396f4f6969