在前端开发中，脱离文档流 (out of flow) 指的是元素不再遵循 HTML 文档的标准布局流程。通常情况下，块级元素会垂直堆叠，而内联元素则水平排列。脱离文档流的元素会打破这种常规布局，不再占据文档流中的空间，后续元素会忽略其存在，就像它不存在一样进行排列。
有几种方法可以让元素脱离文档流：
-
浮动 (Float): 使用
float: left或float: right属性。浮动元素会脱离文档流，并向左或向右移动，直到碰到包含块的边缘或另一个浮动元素。需要注意的是，浮动元素会导致父元素高度塌陷，需要清除浮动来解决这个问题。 -
绝对定位 (Absolute Positioning): 使用
position: absolute属性。绝对定位的元素会完全脱离文档流，并根据其最近的已定位（position: relative,position: absolute或position: fixed）祖先元素进行定位。如果没有已定位的祖先元素，则相对于初始包含块（通常是<html>元素）进行定位。 -
固定定位 (Fixed Positioning): 使用
position: fixed属性。固定定位的元素会完全脱离文档流，并相对于浏览器窗口进行定位。即使页面滚动，固定定位的元素也会保持在相同的位置。 -
粘性定位 (Sticky Positioning): 使用
position: sticky属性。粘性定位的元素在正常文档流中，直到滚动到特定位置，然后转换为固定定位，直到滚动到另一个特定位置，再回到正常文档流。
以下是一个简单的例子，展示了不同定位方式的效果：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
}
.float {
float: left;
}
.absolute {
position: absolute;
top: 20px;
left: 20px;
background-color: lightcoral;
}
.fixed {
position: fixed;
bottom: 20px;
right: 20px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div>1</div>
<div class="float">2 (Float)</div>
<div>3</div>
<div class="absolute">4 (Absolute)</div>
<div>5</div>
<div class="fixed">6 (Fixed)</div>
</body>
</html>
在这个例子中，第二个 div 使用了浮动，第三个 div 会占据第二个 div 原本的位置。第四个 div 使用了绝对定位，完全脱离了文档流，第五个 div 会忽略它的存在。第六个 div 使用了固定定位，会一直显示在右下角。
总而言之，理解脱离文档流的概念对于构建复杂的布局至关重要。选择哪种方法取决于具体的布局需求。
标签：定位,脱离,元素,文档,position,div,什么 From： https://www.cnblogs.com/ai888/p/18569733