前言
浮动是css的一种定位方式，但因为其不好控制，加上需要手动消除浮动等因素导致使用场景较少。但理解了之后在某些场景还是很好用的，温故而知新。就让我们来看看吧。
在理解浮动之前首先要知道默认情况下块级元素（如div）是怎么排列的，它在页面中独占一行。如果将几个块级元素进行默认排列，那么将会像是列表一样自上而下排列。
在这种情况之下，不管块级元素的宽度多小，它都会占满一整行。而布局的目的就在于此，“怎么在一行显示多个div元素”
浮动会让块级元素脱离标准流，漂浮在标准流之上，这也是它难以控制的地方
展现形式
当将一个块级元素设置成浮动之后，首先它本身将脱离文档流。此时其他元素因为它的脱离而需要重新排列。比如：
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
将div 2设置成float。此时我们假想div2没有了，现在文档流的排序应该是
<div>1</div>
<div>3</div>
<div>4</div>
总结：
在这样子重新排列之后，浮动的元素将浮动在它上一个块级元素，比如div1的后面。如果是在左边，那么它会挡住div3，覆盖在div3上面。可浮动的覆盖并不是简简单单的覆盖，对于被覆盖的div3，它会挤压div3里面的元素，即它并不是直接覆盖在div3上面，div3里面的子元素也被覆盖看不到。而是覆盖在div3上面之后，将div3里面的子元素挤压下来。此时，如果div3里面有足够的空间容纳子元素，那么子元素将使用剩余的空间，如果没有的话将挤压出div3
float的排列可以设置为左排列和右排列，这里的左右指的是页面的左右边缘
多个float的情况
如果多个元素进行浮动，那么之后的浮动元素会首先找他上面排列的块级元素或者相同排列方向的浮动元素，排在它的后面
如果是排列方向为右边的话，那么第一个浮动元素将在最后边，之后的浮动元素将往后面排列
怎么回事呢？来看看案例吧：
比如我将div1之外的元素都设置为左浮动，那么将div2找到了div1这个块级元素，排在下面(下面是因为块级元素独占一行)。div3找到了div2这个排列方向相同的，所以排在了后面，div4找到了div3同理。
那么我设置左和右呢？
记住，重点是找块级元素或者排列相同的浮动元素。在下面的图当中，我们将div3和5设置成了左边，所以div3找到了div1，div5找到了div3一起排列在左边。div2和div4方向为右边，div2找到了div1，div4找到了div2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Float</title>
<style>
div {
height: 100px;
border: 1px solid black;
}
.div1 {
background-color: red;
width: 100px;
height: 100px;
/* display: inline-block; */
}
.div2 {
background-color: yellow;
width: 80px;
height: 50px;
float: right;
}
.div3 {
background-color: green;
width: 150px;
float: left;
}
.div4 {
width: 70px;
float: right;
}
.div5 {
background-color: black;
float: left;
width: 30px;
color: white;
}
</style>
</head>
<body>
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
</body>
</html>
清除浮动
首先我们得明白，为什么要清楚浮动呢？在上面我们看到，如果有多个浮动的元素，那么他们是水平排列，那有时候我们想要它既浮动，但是它在下一行呢？那么这就是清除浮动的意义了。
怎么清除？
清除浮动清除的是想要单独一行的元素本身，它使用的方式是，我不想要对我元素左边有浮动效果或者右边有浮动效果。语法是这样子的
clear: none | left | right | both
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
例子
还是用之前的div1，div2，div3，div4,div5来进行举例，现在div1不设置浮动，其余设置浮动，div3设置不允许对左边浮动。那么是什么样的呢？
使用clean进行浮动清除的时候，最重要的是记住，它只能影响本身。即它设置了对左边浮动，使用clean可以让它不对左边浮动元素进行浮动。但它影响不了其他元素
