什么是BFC?
BFC全称是Block Formatting Context,意思就是块级格式化上下文。你可以把BFC看做一个容器,容器里边的元素不会影响到容器外部的元素。
BFC有什么特性?
1.BFC是一个块级元素,块级元素在垂直方向上依次排列。
2.BFC是一个独立的容器,内部元素不会影响容器外部的元素。
3.属于同一个BFC的两个盒子,外边距margin会发生重叠,并且取最大外边距。
4.计算BFC高度时,浮动元素也要参与计算。
如何创建BFC?
给父级元素添加以下任意样式
1.overflow: hidden;
2.display: flex;
3.display: inline-flex;
4.display: inline-block;
5.position: absolute;
6.position: fixed;
BFC有什么作用?
1.解决当父级元素没有高度时,子级元素浮动会使父级元素高度塌陷的问题
2.解决子级元素外边距会使父级元素塌陷的问题