你还在用CSS旧时代布局的王者：浮动float 吗？

写在前面

随着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即可，父元素会计算浮动元素的高度并赋值给自身。

最后

整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。

有需要的小伙伴，可以点击下方卡片领取，无偿分享