1、BFC（块级格式化上下文）
块级格式化上下⽂，是⼀个独⽴的渲染区域，让处于 BFC 内部的元素与外部 的元素相互隔离，使内外元素的定位不会相互影响。
position: absolute/fixed
display: inline-block / table
float 元素
ovevflow !== visible
2、实现BFC属性的方法：
1. 浮动元素，float 除 none 以外的值
2. 定位元素，position的值不是static或者relative。
3. display 为 inline-block 、table-cell、table-caption、table、table-row、table-row-group、
table-header-group、table-footer-group、inline-table、flow-root、flex或 inline-flex、grid或 inline-grid
4. overflow 除了 visible 以外的值（hidden，auto，scroll）
5. 根元素<html> 就是一个 BFC
3、BFC的作用
1、避免外边距重叠（防止margin塌陷）
- margin塌陷的意思：同时给两个div设置相同的属性，当设置margin为100px，那么两个div之间的间隙应该是margin-bottom+margin-top=200px的外边距，但是没有设置BFC属性，块的上外边距和下外边距会合并为单个边距，取最大值，如果margin相等，则仅为一个，这就是外边距重叠（margin塌陷）。
- 通过给其中一个div包裹一个父div，设置BFC属性，来解决margin塌陷的问题
<style>
/* 通过设置overflow:hidden属性，将父容器设置为BFC属性 */
.container {
overflow: hidden;
}
.cube {
width: 100px;
height: 100px;
background-color: blueviolet;
margin: 100px;
}
</style>
</head>
<body>
<!-- 外边距重叠 -->
<div class="container">
<div class="cube"></div>
</div>
<div class="cube"></div>
</body>
2、用于清除浮动
通过给父元素设置BFC属性，来实现清除浮动
<style>
/* overflow: hidden;设置该属性，将父元素设置了BFC属性，即实现了清除浮动 */
.parent {
border: 10px solid darkorange;
overflow: hidden;
}
.child {
width: 100px;
height: 100px;
background-color: rgb(63, 190, 80);
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
3438
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
