清除浮动
利用BFC进行清除
什么是BFC
块级格式化上下文（Block Formatting Context，BFC）是页面上一个隔离的独立容器，容器内部的子元素不会影响到外部元素。
当两个块级元素处于同一个BFC时，它们的垂直外边距会发生重叠。
BFC的特性
- BFC可以包含浮动元素，阻止元素被浮动元素覆盖。
- 内部的盒子会在垂直方向上一个接一个放置。
- 属于同一个BFC的两个相邻盒子的垂直外边距会发生重叠。
- 计算BFC的高度时，浮动元素也会参与计算。
BFC的应用
- 清除浮动。
- 防止外边距重叠。
- 自适应两栏布局。
如何创建BFC
- 根元素或包含根元素的元素。
- 浮动元素（元素的
float不是none）。 - 绝对定位元素（元素的
position为absolute或fixed）。 overflow值不为visible的块元素。display属性为flex、grid、table... ）。
示例代码
html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 第三种 */
/* .father{
overflow: hidden;
} */
.box {
width: 100px;
height: 100px;
background-color: red;
}
#box1 {
margin-bottom: 200px;
}
#box2 {
margin-top: 100px;
/* 第一种 */
/* float: left; */
/* 第二种 */
/* position: absolute; */
/* 第四种 */
/* display: inline-block; */
}
</style>
</head>
<body>
<div id="box1" class="box"></div>
<div class="father">
<div id="box2" class="box"></div>
</div>
</body>
</html>after伪元素
html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BFC</title>
<style>
.container {
border: 5px solid #000;
}
.container::after {
content: "";
display: block;
clear: both;
}
.float {
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.content {
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="float"></div>
<div class="content">content</div>
</div>
</body>
</html>