BFC知识点

BFC是什么

块级格式化上下文，一个独立的块级渲染区域。不影响外部元素的布局

创建BFC

1. float： != none;
2. position: != static/relative
3. display: inline-block | flex | inline-flex
4. overflow: hidden

BFC 其他作用

• BFC可以取消盒子margin塌陷

#fa{
width: 200px;
height: 300px;
background-color: blueviolet;
}
.son{
width: 100px;
height: 100px;
background-color: blue;
margin-top: 20px;
}
父盒子fa位置会被往下拉一段距离

• BFC可以阻止元素被浮动元素覆盖