BFC
全称叫块级格式化上下文（Block Formatting Context）
一个独立的渲染区域，有自己的渲染规则，与外部元素不会互相影响。
BFC 的触发方式：
设置了 float 属性（属性值不为 none ）
设置了 position 属性为 absolute 或 fixed
设置了 display 属性为 inline-block 或 inline-flex 或 inline-grid
margin 塌陷问题：
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
假设有两个 div，其宽高都是 100px。
.box1, .box2 {
width: 100px;
height: 100px;
}
.box1 {
margin-bottom: 20px;
}
.box2 {
margin-top: 30px;
}
如果期望两个盒子之间的间距为 20+ 30 = 50px，则让它们都触发 BFC（块级格式化元素）即可:
-
display: inline-block
-
display: inline-grid;
-
两个元素都设置 float（这里单独给第二个
div设置float: left也可以）
-
定位
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
