BFC
Block Formatting Context 块级格式化上下文
BFC容器内部元素与外部完全隔绝,不会影响到外部的元素
触发
float
的值不为none
overflow
的值为auto
/scroll
/hidden
display
的值为table-cell
/table-caption
/inline-block
position
的值不为relative
/static
清除浮动
浮动元素会脱离文档流,所以普通容器内的浮动元素是不会被算进容器高度中,所以会导致一些容器高度为0,但是子元素有高度,从视觉上遮盖了该容器的兄弟元素,此时把该容器设置为BFC容器,该容器的高度会包含容器内的浮动元素的高度,从而达到正常显示的目的。
外边距垂直坍塌
<style>
.container {
overflow: hidden;
}
.box1 {
margin: 20px;
width: 50px;
height: 50px;
}
.box2 {
margin: 10px;
width: 50px;
height: 50px;
}
</style>
<!-- 坍塌 -->
<div class="box1"></div>
<div class="box2"></div>
<!-- 形成两个BFC,不坍塌 -->
<div class="container">
<div class="box1"></div>
</div>
<div class="container">
<div class="box2"></div>
</div>
此时,box1和box2之间的边距会是20px(取两者margin的最大值),这就是外边距垂直坍塌。为了消除外边距垂直坍塌,可以给这两个盒子都添加一个父元素,并且将这个父元素设置为BFC区域,这样就形成了两个独立的不会相互影响的个体,这样就可以解决margin坍塌的问题了
包含坍塌
<style>
.container {
height: 300px;
width: 200px;
background-color: aquamarine;
<!-- 把父元素设为BFC区域 -->
overflow: hidden;
}
.box {
height: 100px;
width: 50px;
margin: 10px;
background-color: bisque;
}
</style>
给子元素添加margin导致父元素也一起下移,此时,我们只需要使父元素变成一个BFC区域,就可以解决包含坍塌的问题。
关于重绘/重排
DOM的构造是增量的,CSS的渲染是阻塞的,只有等到页面加载了全部的CSS规则才会开始渲染,因为CSS是可以被覆盖的,所以只有等所有的CSS都获取到了才能确定渲染规则。
重排:重新计算元素在设备视口内的位置和大小。代价高。 重绘:绘制像素?
DOM -> CSSOM -> 渲染树 -> 确定布局 -> 绘制