所谓脱离文档流，即将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当没看到它，两者位置重叠都是可以的。这里，通过讲解浮动脱离文档流（float）和绝对定位脱离文档流（position:absolute）的区别，让大家对这一概念有更深的认识。
一、浮动脱离文档流
使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
我们先利用下面代码在普通流中看一下效果，方便对比：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#outofnormal {
width: 200px;
background-color: cyan;
padding: 10px;
}
</style>
</head>
<body>
<div id="outofnormal">
Out of normal:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi esse impedit autem praesentium magni culpa, amet corporis, veniam consequatur voluptates temporibus. Voluptates eius similique asperiores cupiditate fugit hic atque quisquam?
</div>
<h2>Normal Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum praesentium nam tempora beatae quis nobis laboriosam alias aliquid, tenetur exercitationem. Odio, aperiam, illo! Eveniet natus dignissimos architecto velit eligendi id!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem reprehenderit velit nam delectus distinctio at unde aliquid officia illo, tempore vitae et incidunt non, ut eos nesciunt quaerat. Enim, minus.</p>
</body>
</html>
在普通流的效果如下：
然后给蓝色的盒子outofnormal加上左浮动：
#outofnormal {
width: 200px;
background-color: cyan;
padding: 10px;
float: left;
}显示结果如下：
浮动之后，蓝色的div就脱离了文档流，跟在后面的h2和p的盒子都当做没看到这个div的样子去定位，所以他们都顶着浏览器左边和顶部的边框。但是有趣的是，h2和p里面的文本，却都看到了这个被float的div，在自己的盒子里往右推，飘到了蓝色div的边上。这就是float的特性，其他盒子看不见被float的元素，但是其他盒子里的文本看得见。
二、绝对定位脱离文档流
将float: left;改为position:absolute
#outofnormal {
width: 200px;
background-color: cyan;
padding: 10px;
position:absolute;
}显示结果如下：
看到这里，有发现与浮动脱离文档流的不同之处吗？相信聪明的你已经发现了，设置了绝对定位后，不仅是旁边的其他盒子无视蓝色div的存在，连盒子里的文本也无视了蓝色div的存在，顶着左上边框定位！
三、总结
使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
而对于使用absolute :position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
