CSS-Learning | CSS中的定位模型：绝对定位、相对定位、固定定位和浮动（如何清除浮动）
定位模型
CSS中有几种不同的定位模型，包括浮动、绝对定位、相对定位和固定定位。除非特别指定，否则所有元素盒子都会在常规文档流中生成，即positioin属性的默认值为static。常规文档流中元素盒子的位置，由元素在HTML中的位置决定。
确定元素的包含块至关重要，定位模型不同，计算width、height、margin或padding值为百分比时，计算依据会发生变化。接下来，我们来看看不同定位模型以及与之对应的包含块。
相对定位 position: relative
使用相对定位，可以通过设置top、right、bottom和left属性，使该元素相对于它在常规文档流的初始位置平移一段距离。
无论是否位移，相对定位的元素仍然会在文档流中占用初始的空间。因此，这样平移元素会导致它遮挡其他元素。
绝对定位 position: absolute
绝对定位会把元素拿出文档流，因此不会占用原来的空间，文档中的其他元素会各自重新定位，仿佛绝对定位的那个元素没有存在过一样。
绝对定位元素的包含块是距离它最近的定位祖先，也就是display属性设置为static之外的任意值的祖先元素。如果没有这么一个定位祖先，那么它就相对于文档的根元素即html元素定位。文档的根元素也叫做起始包含块。
固定定位 position: fixed
固定定位元素的包含块是视口（viewport）。因此固定定位可用于来创建始终停留在窗口相同位置的浮动元素。
浮动 float
浮动盒子可以向左或向右移动，直到其外边沿接触包含块的外边沿，或接触另一个浮动盒子的外边沿。
浮动盒子也会脱离常规文档流，因此常规流中的其他块级盒子的表现，几乎当浮动盒子根本不存在一样。
如果浮动元素后跟着的是常规文档流中的元素，那么这个元素的盒子就会当浮动盒子不存在一样，该怎么布局就怎么布局。但是，这个元素盒子中的文本内容则会记住浮动元素的大小，并在排布时避开它，为它留出相应的空间，造成文本环绕盒子的效果。
清除浮动
想要阻止行盒子环绕在浮动盒子外面，需要给行盒子的元素应用clear属性。
clear属性的值有left、right、both和none，用于指定盒子的哪一侧不应该紧挨着浮动盒子。
因为浮动的元素被拿出文档流，包含它的块只包含浮动元素，就无法生成高度。怎么才能使块从视觉上也包住浮动元素？需要在这个元素内部某处应用clear属性。
- 在结束的div标签前额外添加一个空元素，然后清除该元素。
.block {
background-color: gray;
}
.tag {
float: left;
}
.clear {
clear: both;
}
<div class="block">
<div class="tag">浮动元素</div>
<div class="clear"></div> // 添加额外的空div
</div>
- 使用:after伪类来模拟额外的清除元素。
.block {
content: "";
display: block;
clear: both;
}
- 设置overflow属性，生成块级格式化上下文(BFC，block formatting context)。因为块级格式化上下文自动包含浮动，允许元素创建自己内部的块级格式化上下文的规则：
- display属性值设置为inline-block或table-cell之类的元素，可以为内容创建类似块级的上下文；
- float属性值不是none的元素；
- 绝对定位的元素；
- overflow属性值不是visible的元素；
.block {
overflow: auto;
}