Block fomatting context 块级格式化上下文
简单理解就是具备BFC特性的元素, 就像被一个容器所包裹, 容器内的元素在布局上不会影响外面的元素。用自己话说就是生成一个与他人无关的盒子独立开来
BFC作用
-
解决普通文档流块元素的外边距折叠问题
也就是说, 之前遇到的上下margin会重叠问题
解决方法:
元素置于不同的BFC中进行隔离就可以解决
image
解决:
在父元素里添加属性overflow: hidden会触发BFC, 和外部隔开, 内部规矩化
-
被浮动元素遮挡问题
解决:
可以触发下方的元素, 对其添加属性overflow:hidden 触发BFC盒子模型
image
可以对demo2触发其BFC然后就不会遮挡
image
BFC的创建方式
-
根元素方式来创建, 也就是
image
-
通过浮动元素来创建
-
通过绝对定位来创建
-
display 取值来创建
-
inline-block
-
table-cell
-
table-caption
-
flex/ inline-flex
-
-
overflow 不为visible就可以创建 !!
网友评论