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