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脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。