1、代碼
（1）示例代碼1
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>CSS布局之脫離文檔流詳解——浮動、絕對定位脫離文檔流的區別</title>
<style type="text/css"> .left { width: 300px; height: 500px; background: red; float: left;
} .right { height: 500px; background: blue;
}
</style>
</head>
<body>
<div class="left">111</div>
<div class="right">222</div>
</body>
</html>
（2）示例代碼2
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>CSS布局之脫離文檔流詳解——浮動、絕對定位脫離文檔流的區別</title>
<style type="text/css"> .left { width: 300px; height: 500px; background: red; position: absolute;
} .right { height: 500px; background: blue;
}
</style>
</head>
<body>
<div class="left">111</div>
<div class="right">222</div>
</body>
</html>
2、結論：
使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會為這個元素讓出位置，環繞在周圍。
而對於使用absolute :position脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視它。