--

6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明

BFC的全称是 Block Format Content直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

当父目录的

• float属性不为none
• position为absolute或者fixed
• display为inline-block,table-cell,table-caption,fle x,inline-flex，
• overflow不为visible

都会生成BFC。

作用

• 清除浮动

如图由于内部元素浮动无法撑开父容器

image.png

因此我们可以通过为父容器加入overflow: hidden;触发父容器的bfc使父容器计算高度时候把内部的浮动元素包含。

image.png

• 防止垂直margin重叠（折叠）

如图当两个div设置margin:50px时候但是他们之间的距离还是50px说明两个margin重叠（折叠）了

image.png

在其中一个div父容器加入overflow: hidden;触发bfc此时间距变为100px

image.png