前端学习随笔：float布局问题------float元素是否脱离了文档流

Posted 2020-06-22

问题： 今天学习2016-03-13，我知道float的原始作用为实现文字的环绕效果，但是老师说：对元素设置float属性后，该元素依然处于标准文档流中，同时浮动会

引起父元素的高度塌陷问题（怎么解决，目前不知道）。但是，紧随其后的块元素会无视设置float属性的元素，但是后面元素的文本依然会为float元素让出位置，环绕于周围。既然后元素没有按照标准文档流单独占一行，我是不是可以理解为浮动的元素脱离了文档流？？前后矛盾了。

 

解答：回答这个问题之前，首先解释一下什么叫脱离文档流！

css中脱离文档流，也就是讲元素从普通的布局排版中拿走，其他盒子在进行定位的时候，会当脱离文档流的元素不存在而进行定位。

     目前我所学习的部分，只有绝对定位absolute和浮动float才会脱离文档流。

但是，两者脱离文档流的结果是有区别的。用我的理解，可以说是float是部分脱离文档流，而absolute是完全脱离文档流。也就是说，使用float属性时，其他元素会无视这个float元素，但是其他元素内的文本依然会为这个元素让出文职，环绕在周围（感觉类似于word文字环绕功能），所以称为部分无视。而使用absolute positioning脱离文档流的元素，其他盒子无论是本身还是盒子内的文本都会无视这个元素，也就是我说的完全脱离文档流。