一、浮动简述
浏览器在解析html文档时，正常的顺序是从上往下、从左往右解析。这个正常的解析过程，叫做正常文档流(标准文档流)，而浮动就是使得元素脱离文档流，“浮”在浏览器上。
浮动会使元素脱离文档流，不占位置，在需要多个元素在同一行时，设置元素靠左或者靠右摆放，可以使用浮动，但使用浮动时，需要清除浮动，以免影响后续的元素。
浮动的写法如下：
<style>
.fl {
float: left;
}
.fr {
float: right;
}
</style>二、设置浮动
假设现在有三个盒子，当他们正常渲染的时候，是从上往下摆放的，如下：
此时的代码如下：
<body>
<style>
.box {
width: 100px;
height: 100px;
}
.box-1 {
background-color: red;
}
.box-2 {
background-color: pink;
}
.box-3 {
background-color: skyblue;
}
</style>
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
</body>如果我们希望三个盒子在同一行，可以设置浮动，代码如下：
<body>
<style>
.box {
width: 100px;
height: 100px;
float: left;
}
.box-1 {
background-color: red;
}
.box-2 {
background-color: pink;
}
.box-3 {
background-color: skyblue;
}
</style>
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
</body>效果如下：
此时如果再放其他的元素，会被覆盖，假设我们放其他的盒子，代码如下：
<body>
<style>
.box {
width: 100px;
height: 100px;
float: left;
}
.box-1 {
background-color: red;
}
.box-2 {
background-color: pink;
}
.box-3 {
background-color: skyblue;
}
.box-4 {
width: 200px;
height: 200px;
background-color: palegreen;
}
</style>
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box-4"></div>
</body>效果如下，我们发现第四个盒子的一部分被覆盖了，这是因为我们设置了浮动，上面的三个盒子脱离文档流，不占位置了，此时我们需要清除浮动，防止影响浮动后续的元素。
三、清除浮动
使用类名选择器清除浮动
我们设置一个类clear，添加clear: both;属性，并把类名给第四个盒子（后续元素）就可以清除浮动，代码如下：
<body>
<style>
.box {
width: 100px;
height: 100px;
float: left;
}
.box-1 {
background-color: red;
}
.box-2 {
background-color: pink;
}
.box-3 {
background-color: skyblue;
}
.box-4 {
width: 200px;
height: 200px;
background-color: palegreen;
}
.clear {
clear: both;
}
</style>
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="clear box-4"></div>
</body>或者设置块元素用于清除浮动，添加一个div并添加类名clear，代码如下：
<body>
<style>
.box {
width: 100px;
height: 100px;
float: left;
}
.box-1 {
background-color: red;
}
.box-2 {
background-color: pink;
}
.box-3 {
background-color: skyblue;
}
.box-4 {
width: 200px;
height: 200px;
background-color: palegreen;
}
.clear {
clear: both;
}
</style>
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="clear"></div>
<div class="box-4"></div>
</body>效果如下，此时第四个盒子就不会被浮动的前三个盒子覆盖了。
设置伪类元素清除浮动
还可以使用伪类元素清除浮动，设置伪类元素clearfix。
/* 使用伪类元素清除浮动 */
.clearfix::after {
/* 生成伪类元素属于行内元素 */
content: "";
/* 把行内元素转成块元素 */
display: block;
/* 清除浮动 */
clear: both;
}如果需要清除浮动，只需要给浮动的父元素添加这个属性就可以了，代码如下：
<div class="parent clearfix">
<div class="child bg-pink"></div>
<div class="child bg-orange"></div>
</div>
