是什么(what):是一块独立的渲染区域,内部元素的渲染不会影响边界以外的元素
怎么形成(how):
- float 不设为 none
- overflow 值不设为
visible
或clip
的块级元素 - position 是absolute 或 fixed
- display 是flex ,inline-block,grid,table
应用:
- 清浮动 清浮动具体实现页面
- 避免 margin 重叠(item1 的 margin-bottom 和 item2 的 margin-top 重叠,会取二者较大值,假如相等,取其一)。
下图即为margin 重叠效果:margin 最终只取了.sec 的 margin-top
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style type="text/css">
.first {
margin-bottom: 5px;
background-color: pink;
}
.sec {
margin-top: 65px;
background-color: greenyellow;
}
.clear {
/* overflow: hidden; */
}
</style>
<body>
<div class="box">
<div class="clear">
<div class="first">1111</div>
</div>
<div class="clear">
<div class="sec">2222</div>
</div>
</div>
</body>
</html>
解决办法,通过 BFC 来生成独立的渲染区域:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style type="text/css">
.first {
margin-bottom: 5px;
background-color: pink;
}
.sec {
margin-top: 65px;
background-color: greenyellow;
}
.clear {
overflow: hidden;
}
</style>
<body>
<div class="box">
<div class="clear">
<div class="first">1111</div>
</div>
<div class="clear">
<div class="sec">2222</div>
</div>
</div>
</body>
</html>