脱离文档流
定义
文档流中：内联元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。块级元素单独占据一行，并按照从上到下的方式布局。
脱离文档流
- 文档一旦脱离文档流，在算其父元素的高度时，就不包括其自身了。
- 脱离文档流的方法：
1.float:left;2.position: absolute;3.position:fixed
一、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-GcmBWGuc-1567702554429)(/Users/ocean/Library/Application Support/typora-user-images/image-20190902194622006.png)]
二、position: absolute;
绝对定位(相对于父级的定位)
使用absolute脱离文档流后的元素，是相对于该元素的父类（及以上，如果直系父类元素不满足条件则继续向上查询）元素进行定位的，并且这个父类元素的position必须是非static定位的（static是默认定位方式）。
1.若只指定 position: absolute;
（1）相对于前面的元素则会以正常的文档流方式排练在前面的元素后面
(2) 相对于后面的元素，他将脱离于后面的文档流，后面的元素会无视该元素
[外链图片转存失败(img-pZ0Pa18T-1567702554430)(/Users/ocean/Library/Application Support/typora-user-images/image-20190906004045288.png)]
2.指定他的相对位置
（1）指定left right top bottom 之后会相对相应方向基于父类的位置，若只修改水平方向或者垂直方向的定位，则另一方向还是基于上一点布局
(2)如果修改画布大小，会根据父级元素的变化，发生相应的位置移动
[外链图片转存失败(img-h8lkQYbY-1567702554431)(/Users/ocean/Library/Application Support/typora-user-images/image-20190906004854750.png)]
三、 position: fixed;
完全脱离文档流，相对于浏览器窗口进行定位。（相对于浏览器窗口就是相对于html）。
1.若只指定position: fixed;不设置边距
同position: absolute;
（1）相对于前面的元素则会以正常的文档流方式排练在前面的元素后面
(2) 相对于后面的元素，他将脱离于后面的文档流，后面的元素会无视该元素
2.指定边距
相对于浏览器窗口定位
