所谓的文档流：指的是元素在排版过程中，元素自动从左到右，从上到下的顺序排列。
脱离文档流：也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位
只有绝对定位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。