html脱离文档流啥意思，怎么脱离？

Posted 2023-03-05

一、文档流

在我们生活中，有各种各样的“流”，有电流、水流等，就像水流从高处往低处流一样，我们可以把文档流想象成html元素在浏览器上“流动”。浏览器的顶端就是河流的源头，浏览器的底部就是河流的尽头。 而所谓的文档流（normal flow，也被称为“普通流”），指的是就是元素排版布局过程中，元素会自动从上往下，从左往右地遵守这种流式排列方式。

当浏览器渲染HTML文档时，从顶部开始渲染，为每个元素分配所需要的空间，遇到块级元素则放置在一行，行内元素则被水平放置直到在当前行遇到边界，然后从下一行起点继续渲染。
二、脱离文档流

脱离文档流说的是将元素从普通文档流中脱离出来，而其他没脱离的元素会当其不存在，仍按照给定的位置进行定位，也可以与脱离文档流元素重叠。
三、引起元素脱离文档流的情况有哪些呢？

1、float浮动

2、position：absolute绝对定位

3、position：fixed固定定位
怎么脱离文档流？
1：float
使用float可以脱离文档流。

注意！！！：使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。
2：absolute
absolute称为绝对定位，其实博主觉得应该称为相对定位，因为使用absolute脱离文档流后的元素，是相对于该元素的父类（及以上，如果直系父类元素不满足条件则继续向上查询）元素进行定位的，并且这个父类元素的position必须是非static定位的（static是默认定位方式）。
3：fixed
完全脱离文档流，相对于浏览器窗口进行定位。（相对于浏览器窗口就是相对于html）。 参考技术A 脱离文档流就是不在自己的文档流显示，一般可以使用float浮动脱离，也可以使用相对定位知识脱离文档流本回答被提问者采纳 参考技术B 脱离文档流简称脱流。
一般指的是元素通过浮动定位来实现脱流。
html一般是父子继承关系，我们假设是家族关系，难么脱流可以理解为是脱离它的家族去自立门户。 参考技术C 浮动，定位都可以脱离文档流，HTML类似瀑布，脱离文档流就是从瀑布中悬浮起来