清除浮动
参考：
- https://blog.csdn.net/zyq19930325/article/details/88101456
- https://segmentfault.com/a/1190000010252809?utm_source=sf-similar-article
1 浮动溢出
当容器高度为auto,容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>TEST</title>
<style>
.box {
border: 1px solid black;
}
.child1 {
background-color: antiquewhite;
border: 1px solid black;
width: 100px;
height: 100px;
float: left;
}
.child2 {
background-color: aquamarine;
border: 1px solid black;
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="child1"></div>
<div class="child2"></div>
</div>
</body>
</html>
2 使用带clear属性的空元素
缺点：代码不够优雅
<head>
<style>
......
.clear{
clear:both
}
</style>
</head>
<body>
<div class="box">
<div class="child1"></div>
<div class="child2"></div>
<div class="clear"></div>
</div>
</body>
3 给容器添加overflow属性
（另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1）
.box {
border: 1px solid black;
overflow: auto;
//或者overflow:hidden
}
4 给容器添加浮动属性
但是这样整体都是浮动的，不太推荐
.box {
border: 1px solid black;
float: left;
}
5 通过伪元素给容器加一个看不见的块元素清除浮动
经常使用这种方法清除浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>TEST</title>
<style>
.box {
border: 1px solid black;
}
.child1 {
background-color: antiquewhite;
border: 1px solid black;
width: 100px;
height: 100px;
float: left;
}
.child2 {
background-color: aquamarine;
border: 1px solid black;
width: 100px;
height: 100px;
float: left;
}
.clear::after {
content: "123";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
</style>
</head>
<body>
<div class="box clear">
<div class="child1"></div>
<div class="child2"></div>
</div>
</body>
</html>
6 关于clear:both
6.0 什么是脱离文档流
- 完全脱离文档流：例如position:absolute，使用绝对定位的盒子，其他盒子无论是其本身还是里面的任何元素都会无视这个绝对定位的盒子进行布局。
- 部分脱离文档流：即float盒子，使用float属性后，其他block盒子会无视float盒子进行布局，但是其他盒子内的inline元素和inline-block元素依旧会为这个浮动的盒子让出位置。
- 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 浮动元素之后的元素将围绕它。
- 浮动元素之前的元素将不会受到影响。
- 如果图像是右浮动，下面的文本流将环绕在它左边：
- clear使得对象左边不允许有浮动/右边不允许有浮动/不允许有浮动对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>TEST</title>
<style>
.a {
float: left;
}
.b {
float: left;
}
.c {
}
</style>
</head>
<body>
<p class="a">第一列</p>
<p class="b">第二列</p>
<p class="c">底部</p>
</body>
</html>
给c添加一个样式
.c {
clear: left;
}
