一、浮动（Float）
1. 什么是浮动？
浮动最初的设计目的是为了实现文字环绕图片的效果（类似杂志排版），后来被广泛用于布局。通过浮动，可以让元素脱离正常文档流，向左或向右"漂浮"到容器的边缘。
2. 基本用法
css
.box {
float: left; /* 或 right */
}-
向左浮动：元素会尽可能靠左，后面的内容会围绕它。
-
向右浮动：元素会尽可能靠右，后面的内容会围绕它。
3. 典型场景
-
图文混排（文字环绕图片）。
-
传统多列布局（例如导航栏和内容区并排）。
4. 浮动的副作用
-
父容器高度塌陷：浮动的元素脱离文档流，父容器的高度可能变为0。
-
解决方法：清除浮动（Clearfix）。
css
.clearfix::after {
content: "";
display: block;
clear: both; /* 清除左右浮动的影响 */
}5. 代码示例
css
<div class="container clearfix">
<div class="box left">左浮动元素</div>
<div class="box right">右浮动元素</div>
</div>
<style>
.box {
width: 100px;
height: 100px;
background: pink;
}
.left { float: left; }
.right { float: right; }
.clearfix::after { /* 清除浮动 */ }
</style>二、定位（Positioning）
1. 什么是定位？
定位用于精确控制元素在页面中的位置。CSS中有5种定位方式：
-
static（默认，正常文档流） -
relative（相对定位） -
absolute（绝对定位） -
fixed（固定定位） -
sticky（粘性定位）
2. 详细解释
(1) position: static
-
默认值，元素按正常文档流排列。
-
设置
top/left等属性无效。
(2) position: relative
-
相对自身原本位置进行偏移。
-
不脱离文档流，原位置仍保留。
css
.box {
position: relative;
top: 10px; /* 向下偏移10px */
left: 20px; /* 向右偏移20px */
}(3) position: absolute
-
脱离文档流 ，相对于最近的非
static定位的祖先元素定位。 -
常用于对话框、下拉菜单等需要精准定位的场景。
css
.parent { position: relative; } /* 父元素需要设置relative/absolute/fixed */
.child {
position: absolute;
top: 0;
right: 0;
}(4) position: fixed
-
脱离文档流 ，相对于**浏览器视口（viewport）**定位。
-
元素位置不随页面滚动改变（例如固定导航栏）。
css
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
}(5) position: sticky
-
混合定位 ：默认行为类似
relative，当滚动到特定位置时变为fixed。 -
常用于吸顶效果（例如表格标题随滚动固定）。
css
.header {
position: sticky;
top: 0; /* 当滚动到距离顶部0px时固定 */
}三、浮动 vs 定位
| 特性 | 浮动（Float） | 定位（Positioning） |
|---|---|---|
| 文档流 | 脱离文档流，但内容环绕 | absolute/fixed完全脱离文档流 |
| 主要用途 | 布局、文字环绕 | 精准控制元素位置 |
| 父容器影响 | 可能导致高度塌陷 | 不影响父容器高度（脱离文档流） |
| 层叠控制 | 通过z-index控制 |
通过z-index控制 |
四、常见问题
1. 什么时候用浮动？什么时候用定位？
-
浮动：传统多列布局、文字环绕。
-
定位：需要元素固定在某个位置（如弹窗、悬浮按钮）。
2. absolute定位的参照物是谁？
- 相对于最近的非
static定位的祖先元素。如果找不到，则相对于<body>。
3. 如何解决浮动的高度塌陷？
- 使用
clearfix技巧，或者在父元素设置overflow: hidden。
五、总结
-
浮动：适合简单的布局和文字环绕，但要注意清除浮动。
-
定位 ：适合精确控制元素位置，注意
relative/absolute/fixed的区别。 -
现代布局：Flexbox和Grid布局逐渐取代浮动，但浮动和定位仍是基础。