所谓的文档流：指的是元素在排版过程中，元素自动从左到右，从上到下的顺序排列。
脱离文档流：也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位
只有绝对定位absolute和浮动float才会脱离文档流。
使用float脱离文档流时，其他盒子会无视这个元素（完全无视），但其他盒子内的文本依然会为这个元素让出位置，环绕在周围(可以说是部分无视)。
(1)使用float实现文本环绕效果（文字部分无视，此时浮动元素虽然脱离文档流，但任然占据空间）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"> .text{
width:100px;
height:100px;
background-color: blue;
float:left;
}
</style>
</head>
<body>
<div class="pre">
<span class="text"></span>
文字文字文字文字文字文字文字文字文字
</div>
</body>
</html>
（2） 盒子元素完全无视浮动元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"> .text{
width:100px;
height:100px;
background-color: blue;
float:left;
}
.bro{
width:200px;
height:200px;
background-color: red;
}
</style>
</head>
<body>
<div class="pre">
<span class="text"></span>
</div>
<div class="bro">
</div>
</body>
</html>
（3） 盒子中的文字部分无视，但盒子本省完全无视
</html> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"> .text{
width:200px;
height:200px;
background-color: blue;
float:left;
}
.bro{
width:300px;
height:300px;
background-color: red;
}
</style>
</head>
<body>
<div class="pre">
<span class="text"></span>
</div>
<div class="bro">
文字部
</div>
</body>
</html>
而对于使用absolute position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。(可以说是完全无视)
float是魔鬼，会影响其他相邻元素；但是clear是小白，其只会影响自身，不会对其他相邻元素造成影响！
常用清除float副作用 ：在父元素中的所有子元素的最后添加带有clear：both；属性的元素可以清楚浮动，使得父元素具有高度。
<div style="clear:both;"></div>
注意：对盒子里的元素使用float属性时注意父元素的宽度设置，高度可以设为auto。