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属性。

1. 在结束的div标签前额外添加一个空元素，然后清除该元素。

.block {
	background-color: gray;
}
.tag {
	float: left;
}
.clear {
	clear: both;
}
<div class="block">
	<div class="tag">浮动元素</div>
	<div class="clear"></div> // 添加额外的空div
</div>
           

1. 使用:after伪类来模拟额外的清除元素。

.block {
	content: "";
	display: block;
	clear: both;
}
           

1. 设置overflow属性，生成块级格式化上下文(BFC，block formatting context)。因为块级格式化上下文自动包含浮动，允许元素创建自己内部的块级格式化上下文的规则：

• display属性值设置为inline-block或table-cell之类的元素，可以为内容创建类似块级的上下文；
• float属性值不是none的元素；
• 绝对定位的元素；
• overflow属性值不是visible的元素；

.block {
	overflow: auto;
}