理解元素的浮动float分为背景与内容,属于“半层”飘出。
今天和朋友讨论了一下float，因为这是一个对初级或者小白前端程序员挺重要的内容，所以今天就来说说float浮动时容易出现的一个小“bug”。
一般来说，两个div会独占一行，一行在上一行在下，当我们给上面的div加浮动时会发现下面的div会“钻到上面div”的下面，这很容易理解。如下图，一个简单的demo。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>李小白的float测试</title>
<style type="text/css">
.first{
width: 100px;
height: 100px;
background: red;
float: left;
}
.second{
width: 150px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
</body>
</html>
可以看到下面的蓝色div钻到红色div下面，这是因为红色div浮动了，相当于向上漂浮了“一层”。这里一层打引号是为什么勒，因为很初学小白会认为浮动就是漂浮于标准文档流上方一层，其实是半层！这就是我今天要讲的“半层”原理。且看下文。
此时如果我们给蓝色div里面加内容就会出现下图情况。
<head>
<meta charset="utf-8">
<title>李小白的float测试</title>
<style type="text/css">
.first{
width: 100px;
height: 100px;
background: red;
float: left;
}
.second{
width: 150px;
height: 100px;
background: blue;
color: white;
}
</style>
</head>
<body>
<div class="first"></div>
<div class="second">我是被挤出的文字</div>
</body>
有看到文字是没有被红色div覆盖的，即文字没有钻进红色div的下方（这里大家可以复制我贴的源码稍作修改动手试一试）就会发现无论怎么样，文字始终是不会在浮动的div下面被覆盖住，这是为什么勒？
其实在元素的浮动中，我们可以将一个元素分为2层，背景和内容，给一个元素浮动就相当于将它的背景浮动起来了（没有背景可以理解为空背景，空背景也是占位置的），举个例子：
一个元素就是一块饼干，当它有内容时就是芝麻饼干，假设桌子上有一个无芝麻饼干（即对应图中的红色div）和一块大一点的芝麻饼干（对应图中的蓝色div），此时我们如果将无芝麻饼干向上移动至蓝色饼干的芝麻的水平位置（float漂浮是它上移），那么下面将空出一个位置，此时蓝色饼干的饼干可以挤到原来红色饼干所在的位置，但是由于红色饼干现在的位置在蓝色饼干的芝麻这一层，所以蓝色饼干的芝麻是不能钻到红色饼干的下面，因为蓝色饼干的芝麻和红色饼干属于同一层，都在蓝色饼干的上面，所以此时，芝麻只能分布在蓝色饼干没有被红色饼干覆盖的地方（即蓝色饼干上方多出来的地方），对应图中就是右边的文字。这个对小白来说可能有点绕，所以我写这段文字也很啰嗦，但是如果你发挥想象力和对应图中的div和文字来看是很容易理解的。
这里最重要的就是理解浮动的“半层原理”即只是将元素的背景上移到原来的内容位置，而不是浮动到原来的内容之上。知道这个“半层原理”看似没什么用，但却可以很好地解释为啥两张图片元素放在一起时，左边图片浮动，右边图片不会钻到左边图片下方这个实例以及文字为啥会环绕等。也许半层原理的解释不是很好，大家不妨一起探索前端中的“小bug”。为注重细节的自己打气！