--
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
网友评论