开启AdminJS成长之旅！这是我参与「AdminJS · 12 月更文挑战」的第16天，点击查看活动详情
写在前面
随着flex、grid等布局的兼容性越来越好，float几乎已经在大众的视野消失了，曾经默认的小妖精终究成为了时代的眼泪。
作为前端开发者，你经历过float的时代吗？还在用float吗？
一、什么是浮动？
首先浮动是CSS中的一个属性，所有主流浏览器都支持float（包括IE），其次它的作用是让元素脱离文档流，块元素水平排列，为什么特指块元素呢？因为内联元素本来就是水平排列的。
二、浮动的属性值：
- left ： 元素左浮动
- right ：元素右浮动
- inherit ： 继承父类的float属性值
- none ： 不浮动（默认值）
！注意：任何的版本的 Internet Explorer 都不支持属性值 "inherit"。 是不支持噢~~~
三、浮动的用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动</title>
<style>
div{ height: 100px; width: 100px; }
.box1{ background: red; }
.box2{ background: green; }
.box3{ background: blue; }
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
运行效果图：
分析：页面中有三个div，宽高相等，颜色不一样；div为块级元素，所有默认占据一整行，现在我们要通过float使得三个div位于同一行。
1、float:left （左浮动）
div{ height: 100px; width: 100px; float: left; }
我们给所有的div都添加上了float:left，达到了所有div位于同一行的效果，同理我们可以使用float:right使得元素位于同一行，但是靠右排列
2、float:right （右浮动）
div{ height: 100px; width: 100px; float: right; }
使用右浮动后我们观察一下div的顺序，可以发现： 根据div的先后顺序，左浮动时，div从左到右排列；右浮动时，div从右到左排列
因为左浮动和右浮动元素排列顺序不一样，所有有时候我们需要特别注意一下：比如网页导航栏
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>导航</title>
<style>
ul li{ float: left; list-style: none; margin: 0 20px; }
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>资讯</li>
<li>产品中心</li>
<li>关于我们</li>
<li>反馈</li>
</ul>
</body>
</html>
我们通常使用ul li来制作导航栏，那么想要使得li水平排列，我们为每个li添加了浮动，效果如下：
但是我们发现，一般导航栏都是左边放logo，右边放导航的，但是这里我们不能直接使用右浮动，因为这样导航的顺序就变成不是我们想要的了
像这个我们可以这样来实现：
html,body{ margin: 0 100px; padding: 0; }
.logo{ height: 100px; width: 200px; background: red; float: left; }
ul{ line-height: 100px; float: right; }
ul li{ float: left; list-style: none; margin: 0 20px; }
<body>
<div class="logo"></div>
<ul>
<li>首页</li>
<li>资讯</li>
<li>产品中心</li>
<li>关于我们</li>
<li>反馈</li>
</ul>
</body>
分析：我们让li在ul中仍然是左浮动，保证导航栏的顺序；然后让ul整体右浮动，而logo左浮动，这样就实现了简单的导航栏（当然，这是简单的实例，真正的导航栏还需要进很多步美化）
运行效果图：
3、float : none
这个是浮动的默认值，即为不浮动，用得比较少，一般在你需要覆盖别人的样式时可能会用到。
4、float：inherit
这个更少用，因为所有IE都不支持这个属性值，基本是不能使用的； 不过我没有测试过，是W3C说的~
四、浮动带来的后果：
浮动除了让块元素水平排列之后，还有造成我们元素的一些变化，我们也要清除：
1、浮动改变了块元素的宽度
在没有添加浮动的时候，每个div都占据一整行，如果没有指定div的宽度，div的宽度将会占满一整行
那在没有指定宽度的情况下，添加浮动会怎么样呢？ 结果就是宽度为0了
我们可以在div中填充一些文字，再看效果：
<div class="box1">111</div>
<div class="box2">222</div>
<div class="box3">333</div>
结论：当元素添加浮动属性后，宽高如果不指定，则为内容撑开的宽高。
2、脱离文档流
这是个很重要的知识点
脱离文档流可以理解为元素进行了z轴的位移，网页是个立体结构，除了横竖方 向的xy轴外，还存在面向我们的z轴，浮动元素在z轴上移一层，那么原来所在的层级就空了出来，所以排列在后面的元素会占据浮动元素的前面，被浮动元素遮挡。
可以简单看一下案例：
div{ height: 100px; width: 100px; color: #fff; }
.box1{ background: red; float: left; }
.box2{ height: 200px; width: 200px; background: green; }
.box3{ background: blue; }
首先我们只给div1添加浮动，另外两个不添加；为了展示效果，给div2增加了宽高，我们可以看到这个效果：
这个例子可以很清晰的理解脱离文档流的意思，div1脱离了文档流，则不占据HTML中的位置了，div2补充到div1的位置，但是div1仍看得见，所以div1把div2的一部分遮挡住了。
注意：浮动元素只能遮挡元素，而不会遮挡文本，如div2所示
3、内联元素添加浮动后，拥有块级元素的特性
块级元素添加了浮动后，有了display: inline-block;的特性，比如：不占据一行、宽高根据内容变化、可以定义宽高等
而内联元素同理，也有了display: inline-block;的特性，比如可以定义宽高：
<span>111</span>
<span>222</span>
<span>333</span>
span{ height: 100px; width: 300px; margin: 0 10px; }
现在页面中有一个内联span便签，在不添加浮动的时候，定义宽高无效，如下：
而添加了浮动之后，span的宽高生效了
span{ height: 100px; width: 300px; margin: 0 10px; float:left; }
值得一提的是：元素除了浮动外，并没有添加display: inline-block;
也就是说，这种特性是float自带的，而不是通过修改了元素样式得来的。
4、浮动元素换行时只参考前一个元素的位置
浮动元素在父容器宽度不够的时候，进行换行显示，而换行后的Y轴位置，参考换行元素的前一个。
div{ width:30%; float:left; }
.box1{ background: red; height: 500px; }
.box2{ background: green; height: 100px; }
.box3{ background: yellow; height: 200px; }
.box4{ background: blue; height:300px; }
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
可以看到，蓝色盒子元素进行了换行显示，它所处在的Y轴方向是参照前一个，也就是div3的高度的，而在X轴上，仍存在浮动元素，所以蓝色盒子在红色盒子的右边出现。
五、清除浮动
清除浮动（clear）也是一个CSS属性，用作清除浮动。
注意：初学者容易认为清除浮动是清除自身的浮动，而错误的使用了clear属性，比如：
.div1{ height: 100px; width: 100px; background: red; float: left; clear: both; }
.div2{ height: 200px; width: 200px; background: green; }
这种用法和理解是错误的（给div设置float和clear），得到的结果仍是浮动：
清除浮动应该理解为清除该元素周围的浮动，而不是自身浮动，如果想清除div1浮动不影响div2，那么clear应该添加给div2
.div1{ height: 100px; width: 100px; background: red; float: leftl; }
.div2{ height: 200px; width: 200px; background: green; clear: both; }
表示div2周围不能存在浮动的元素，所以div2不会和div1并列。
注意：清除浮动只是让该元素不和浮动元素一起排列，但是它不会影响div1浮动，我们可以检查一下页面：
div2不浮动，默认占满一整行，div1浮动了，不再占满整行，尽管div2设置清除浮动，但不会影响div1浮动。
除了清除浮动外，还可以通过下面这种方法来让浮动元素占据高度，不影响后续元素的排列：
.f{ overflow: auto; }
.box1,.box2{ width: 200px; height: 300px; float:left; }
.box1{ background: red; }
.box2{ background: yellow; }
.box3{ width: 800px; height: 400px; background: green; }
<div class="f">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="box3"></div>
给浮动元素添加外部容器，并给外部设置样式overflow:auto即可，父元素会计算浮动元素的高度并赋值给自身。