文档流（Document Flow）是指HTML文档中元素根据其在HTML中的位置按照一定的规则依次排布的过程。在文档流中，块级元素独占一行，从上至下按顺序排列，行内元素则在同一行内水平排列。
脱离文档流（Out of Flow）是指元素在文档流之外定位的情况。脱离文档流的元素不再按照文档流的规则进行排布，而是可以自由定位在页面上的任意位置。常见的脱离文档流的方式包括使用CSS属性position: absolute;、position: fixed;、float: left/right;以及CSS3中的flex和grid布局等。
示例：
1. 使用 position: absolute; 脱离文档流：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Out of Flow Example</title>
<style>
.out-of-flow {
position: absolute;
top: 50px;
left: 50px;
background-color: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<p>This is a paragraph in the normal document flow.</p>
<div class="out-of-flow">
This div is out of the document flow.
</div>
</body>
</html>在上述示例中，.out-of-flow 的元素使用了 position: absolute;，它脱离了文档流，定位到页面的固定位置。
2. 使用 float 脱离文档流：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Out of Flow Example</title>
<style>
.float-left {
float: left;
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
}
</style>
</head>
<body>
<div class="float-left">
This div is floated to the left.
</div>
<p>This is a paragraph following the floated div.</p>
</body>
</html>在上述示例中，.float-left 的元素使用了 float: left;，它脱离了文档流，并且周围的文本环绕在其周围。
脱离文档流的元素通常需要谨慎使用，因为它们可能会影响到其他元素的布局。在现代Web开发中，更推荐使用Flexbox或Grid等更灵活的布局方式，而避免过度使用脱离文档流的方法。