浮动对正常文档流的影响（区分浮动和绝对定位的脱标）
浮动对正常文档流的影响（区分浮动和绝对定位的脱标）
问题描述：
一个<div>块元素里 有 两个<span>元素 第一个<span>设置了浮动 那么第二个<span>不应该在 第一个<span>的下面吗？
结果显示:
两个span是紧挨着的。（源代码和浏览器窗口显示图形如下）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
width: 150px;
height: 150px;
border: 1px solid red;
}
.box .one {
float: left;
height: 80px;
width: 80px;
border: 1px solid #000;
}
.box .two {
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="box">
<span class="one">one</span>
<span class="two">two</span>
</div>
</body>
</html>
-
什么是浮动？
float属性的初衷是用于图片，实现文字环绕图片的效果。但后来越多的是用于页面的布局之中。浮动有一个容易被我们忽略的特性，那就是浮动的元素虽然脱离了正常的文档流，但还是会占有正常文档流的文本空间 ( 这里的文本个人理解为超文本：“超文本”就是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素 以及 文字元素)
也就是说float并不是完全地脱离文档流。在学定位的时候，我们知道绝对定位 position:absolute 也是脱离文档流的，但它们之间的区别是：绝对定位是完全脱离文档流，也不再占有正常文档流的文本空间，即完全飘起来了，不会对后面的元素产生任何影响。 -
盒子的理解：
对于块级元素的盒子，盒子可以设置宽高，文本可以在盒子内的任何位置，即文本和盒子结构分离。
对于行级元素，文本有多大，盒子就有多大（不可以设置宽高）。
对于行内块级元素，还是文本有多大，盒子就有多大（可以设置宽高，但文本和盒子一同变化）。
因此对于行级元素和行内块级元素: “盒子即文本，文本即盒子”。
问题分析：
- 加float属性的盒子会脱离正常文档流，通俗一点来讲就是飘起来了。
- 后面的正常盒子（分三类：块级元素、行级元素和行内块级元素）会移动到浮动盒子的下面。
- 根据前面讲到的浮动的元素还是会占有正常文档流的文本空间（该盒子里面的文本不脱标，即盒子浮起来，但文本不浮起来。不管文本多少，都要给它盒子大小的空间），因此在浮动盒子的下方不允许再出现其他盒子的文本。
① 对于后面的盒子是块级元素：
这个不难理解，块级元素的盒子会跑到浮动盒子的下面，但是当该盒内有文本时，文本会跑到浮动盒子外面空间进行显示。
（即，你可以占有我浮动盒子的位置，但你的文本不能在我的位置显示。）
② 对于后面的盒子是行级元素：
如果盒子是空的，也会跑到浮动盒子的下方（相当于什么也没有，没有存在的意义），可一旦给盒子设置边框或添加文本时，由于“盒子即文本，文本即盒子”，文本要在浮动盒子外面显示，所以该盒子也就会跟着在外面。
③ 对于后面的盒子是行内块级元素：
原理同②，只不过可以给盒子即文本设置宽高而已。
（举个例子： 后两种情况就像蜗牛????一样，肉体和壳不分离。行级元素就像死去的蜗牛，大小固定，你多大，你的壳就多大；行内块级元素就像活着的蜗牛，大小不定，有小蜗牛也有大蜗牛。）