相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
#box_relative {position: relative;
left: 30px;
top: 20px;
}
如下图所示：
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
普通流中其它元素的布局就像绝对定位的元素不存在一样：
#box_relative {position: absolute;
left: 30px;
top: 20px;
}
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。
注释：根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。
提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
CSS 定位属性允许你对元素进行定位。
把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
属性值：
| 属性 | 描述 |
| top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
| right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 |
| bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 |
| left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 |
属性值：
设置当元素的内容溢出其区域时发生的事情。
属性值：
设置元素的形状。元素被剪入这个形状之中，然后显示出来。
属性值：
设置元素的垂直对齐方式。
属性值：
属性值：
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
float
属性值：
实例（把图像向右浮动）：
img
{float:right;
}
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<div>
<div style='float:left'><img src="image/1.jpg" alt="后端码农谈前端（CSS篇）第七课：定位与浮动_html/css_WEB-ITnose" ></div>
<div>
<div>
<div>
</div>
</body>
</html>
截图如是：
第一个
第二个
第一个
我们对比这几幅截图，可以得知以下几点：
其实，如是解析仍感觉对float的“破坏性”描述的不太明白，好吧，再来个例子。看看float的本职工作。
<!DOCTYPE html>
<html lang=“utf8”>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<div>
<img src="image/1.jpg" style="max-width:90%" alt="后端码农谈前端（CSS篇）第七课：定位与浮动_html/css_WEB-ITnose" >
哇咔咔，我生来是做文字文字环绕效果的！
</div>
</body>
</html>
去掉'float:left'的元素：
带有'float:left'的元素：
元素去掉'float:left'时的
元素带有'float:left'时的
其实 ，我一直想强调，但一直没能说清楚的是：
Rutin permulaan perpustakaan pautan dinamik gagal
Ensiklopedia penggunaan Printf
Cara melompat dengan parameter dalam vue.js
Bagaimana untuk menyediakan muat semula automatik halaman web
Bagaimana untuk melangkau sambungan ke Internet selepas boot Windows 11
Penggunaan pulangan nilai pulangan Python
Penyelesaian virus exe folder
Apa yang perlu dilakukan jika sistem pemasangan tidak dapat mencari cakera keras
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
