所谓脱离文档流,即将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当没看到它,两者位置重叠都是可以的。这里,通过讲解浮动脱离文档流(float)和绝对定位脱离文档流(position:absolute)的区别,让大家对这一概念有更深的认识。
一、浮动脱离文档流
使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。
二、绝对定位脱离文档流
将float: left;改为position:absolute
设置了绝对定位后,不仅是旁边的其他盒子无视蓝色div的存在,连盒子里的文本也无视了蓝色div的存在,顶着左上边框定位!
三、总结
使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。
而对于使用absolute :position脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。