Html文档流/半脱离文档流/脱离文档流
html最基本的问题就是其元素应当遵循什么原则在页面上进行布局/定位。其布局规则分为文档流（普通流）、半脱离文档流以及脱离文档流等。
在css中，我们主要通过position、float和display等方式进行干预。
文档流
文档流（普通流）是html元素默认的布局方式，元素会默认按照从左到右、从上至下的方式进行排列。元素一般分为占据一行的快级元素（block），没有自己的宽高的内联元素（inline）以及可以指定宽高的可变元素（inline-block）。
代码：
<style>
.box-inline-block {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid red;
}
.box-block{
height: 100px;
border: 1px solid red;
}
.box-inline{
display: inline;
height: 100px;
border: 1px solid red;
}
</style>
<body>
<div class="box-inline-block">box-inline-block</div>
<div class="box-inline-block">box-inline-block</div>
<div class="box-inline-block">box-inline-block</div>
<div class="box-block">box-block</div>
<div class="box-inline">box-inline</div>
</body>
效果：
半脱离文档流
浮动（float）
我们可以通过float属性，实现浮动。主要是用来实现文字环绕图片的效果。它会基于正常文档流情况下所在的位置尽量向左或者向右浮动。block元素会无视它（这里为后来BFC的作用埋下了伏笔），但是仍然会影响inline元素，由于对文档流元素仍然有影响，所以被视为半脱离文档流。
通过下面这段代码我们会发现，block元素无视了float元素，靠左。而inline元素会围绕float元素。
代码：
<style>
.box-block{
width: 200px;
height: 200px;
border: 1px solid red;
}
.box{
width: 100px;
height: 100px;
border: 1px solid red;
}
.float-left{
float: left;
}
</style>
<body>
<div class="box float-left">box2</div>
<div class="box-block">box1</div>
<div class="box float-left">box3</div>
<span>inlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinline
inlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinline
inlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinline
inlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinline
inlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinline
inlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinline
inlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinline
inlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinline
</span>
</body>
效果：
相对定位（relative）
position: relative;会让元素相对于它在正常文档流中的位置进行定位。如果你给它添加了top, right, bottom, left属性，它将会偏移，但仍会保留在文档流中的原始空间。这意味着它并没有完全脱离文档流，只是视觉上移动了位置。
通过下面这段代码我们会发现，relative元素原来的空间仍然被占据，只是视觉上发生了变化。
代码：
<style>
.box-relative{
display: inline-block;
position: relative;
width: 100px;
height: 100px;
left: 20px;
border: 1px solid red;
}
.box{
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
<body>
<div class="box">box2</div>
<div class="box-relative">box1</div>
<div class="box">box3</div>
</body>
效果：
脱离文档流：
absolute（绝对定位）和fixed：
它会脱离正常的文档流（对文档流里的元素不会有任何影响），并且它的位置将相对于其最近的已定位祖先元素（对于absolute）或相对于浏览器窗口（对于fixed）进行定位。如果没有已定位的祖先元素，absolute定位的元素将相对于初始包含块（通常是HTML元素）定位。
display：none
会直接从文档流中将该元素删除，也就脱离了文档流。与之相对的visibility:hidden实现的是将元素隐藏，其占据的空间不变，所以并没有脱离文档流。
从下面的代码我们可以发现，none元素直接从页面被移除了，而hidden虽然看不见，但是其仍然占据了页面空间。
代码：
<style>
.box{
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid red;
}
.none{
display: none;
}
.hidden{
visibility: hidden;
}
</style>
<body>
<div class="box none">box2</div>
<div class="box hidden">box1</div>
<div class="box">box3</div>
</body>
效果：
总结：
| 定位 | 方式 |
|---|---|
| 文档流 | 默认 |
| 半脱离文档流 | float、relative |
| 脱离文档流 | absolute、fixed、none |
