脱离文档流
定义
文档流中：内联元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。块级元素单独占据一行，并按照从上到下的方式布局。
脱离文档流
- 文档一旦脱离文档流，在算其父元素的高度时，就不包括其自身了。
- 脱离文档流的方法：
1.float:left;2.position: absolute;3.position:fixed
1.float
使用float可以脱离文档流。
使用float脱离文档流时，其他盒子会无视这个元素，该元素会浮动于其他文档流之上。
注意！！！：其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.first {
width: 200px;
height: 200px;
border: 1px solid red;
float: left;
}
.second {
width: 200px;
height: 100px;
border: 3px solid blue;
background-color:blue;
}
</style>
</head>
<body>
<div class="first">123</div>
<div class="second">456</div>
</body>
结果：
[外链图片转存失败(img-MyISOYbD-1567516621971)(/Users/ocean/Library/Application Support/typora-user-images/image-20190902194622006.png)]
2.position: absolute;
绝对定位(相对于父级的定位)
使用absolute脱离文档流后的元素，是相对于该元素的父类（及以上，如果直系父类元素不满足条件则继续向上查询）元素进行定位的，并且这个父类元素的position必须是非static定位的（static是默认定位方式）。