关于CSS中的浮动布局
形象地理解，CSS有很多个图层，子图层会覆盖父图层。
比如下面这段代码：
<div id="father">
<div id="son1">son1</div>
<div id="son2">son2</div>
</div>
图层长这样：
兄弟节点的高度相同，子节点的高度是父节点+1。
实际上渲染的时候，可以理解为浏览器是先渲染第0层，再渲染第1层，……
而且第1层中的内容会覆盖掉第0层中没有内容的位置。比如你写：
<div id="father">
First code.
<div id="son1">son1</div>
<div id="son2">son2</div>
</div>
fatherdiv里面会先显示第一行的内容，又因为div要独占一行，所以到了第二行，占据了fatherdiv的剩下部分。
div这种块状元素是有高和宽的，然而，没有设置的时候，会根据其中内部的内容自动设置宽和高。
比如这里就自动设置了刚好包括了第一行的文本串，son1div和son2div。
设置了浮动的元素就是相当于在最上层单独列了一个height=float的最高层出来，浮动的元素单独在这一层里面再次布局，本应位于浮动元素后面的元素会自动补齐浮动元素原本的位置。
但是后面元素中的文本被设置成无法被遮挡，于是会绕过浮动元素的显示，单独“环绕”在浮动元素四周（比如文字环绕图片）。
需要注意，浮动元素仍显示在已经显示的元素之后，它会变得可以设置宽和高，且像行内元素一样可以紧贴着放置。
参考这个视频。
这个时候，父节点中看不到浮动元素了，于是自动生成的宽度和高度就不会将浮动元素计算在内了。
比如这段代码：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<style>
#father {
background-color: whitesmoke;
border: 1px solid black;
width: 300px;
}
#son1 {
background-color: grey;
width: 50px;
height: 50px;
}
#son2 {
background-color: blue;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="father">
<div id="son1" class="son">This is son1.</div>
<div id="son2" class="son">This is son2.</div>
</div>
</body>
</html>
会普通地显示出son1和son2。
但是我们将son1浮动之后，我们会惊奇地发现son2的内容出现在了father之外，并且另起了一行，这令人十分困惑。
不妨将son2的大小调大一些，看看是怎么回事。
#son2 {
background-color: blue;
width: 60px;
height: 60px;
}
我们会发现son1的边框外面出现了蓝色的son2的一部分，这说明son2不是没有显示，只是被son1“遮挡住了”（不要忘记，float层是最高层）。同时，由于文字不可被阻挡的特性，它显示在了son1的外侧。
一下是几个疑惑的解答：
-
为什么son2中的文字内容
This is son2.出现在了son1的下方而不是填充右侧？这是因为son2的宽度不够大，经过实验，有一个特性：将文本串按照空格分割，一行必须要能够至少显示一个连续的字符串才会显示。比如This是一个没有空格的串，它就不会显示成Th一行，is一行，一定会在宽度能够显示This的时候才会显示。如果将This is son2.改成1的话，会直接显示在son1右边的蓝色部分中，而不是另起一行。 -
那如果son2的宽度太小了，一直显示不出完整的串，则么办呢？我们将son2的内容改为
Thisisson2.会发现它就是犟，硬要在下一行超出div来显示，也不愿意把它拆成两行。
加上了清除浮动，浏览器会重新计算父节点的宽度和高度，就可以正常的显示元素。
需要注意，html类似一种解释型语言，你需要先清除浮动，才能正确显示后续元素。
比如：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<style>
#father {
background-color: whitesmoke;
border: 1px solid black;
width: 300px;
}
#son1 {
background-color: grey;
width: 50px;
height: 50px;
float: left;
}
#son2 {
background-color: blue;
width: 50px;
height: 50px;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="father">
<div id="son1" class="son">This is son1.</div>
<div class="clear"></div>
<div id="son2" class="son">This is son2.</div>
</div>
</body>
</html>
这样的改动在渲染son2之前就计算出了father的新高度，所以正确显示了son2。（已经将son1的高度累加进father的高度了）
但是如果写成
<div id="son1" class="son">This is son1.</div>
<div id="son2" class="son">This is son2.</div>
<div class="clear"></div>
你就会发现，son2仍然不能正确显示，这是因为虽然最后浏览器已经正确计算了father的高度，但是在渲染son2的时候高度已经是错误的了，已经导致了son2被son1挡住了。总之因为一些奇怪的原因就是会出现错误。
如果不清楚浮动，也可以让son2也加入浮动，这样也可以正确显示。
总之，在处理完一组浮动元素之后，因为及时地清楚浮动，以免出现奇怪的错误。
浙公网安备 33010602011771号