首先,我们知道float属性会导致塌陷问题,按照经验来说塌陷之后会产生重叠的问题。
但我们在制造文字环绕图片时却不会重叠。
大神张鑫旭说“浮动的破坏性在于切断line box链,致使高度塌陷,但由于浮动元素仍在DOM tree中,实体是看得见摸得着的,所以其占据的实体位置还是在的。”
进一步翻译“脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。而对于使用absolute positioning脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。”