多层浮动定位通过float构建布局结构，结合position实现元素精确定位与层级叠加。1. 使用float创建多列布局，如侧边栏固定、主内容自适应；2. 利用position:relative、absolute或fixed实现悬浮、覆盖和固定效果，如提示框相对于主内容定位；3. 通过z-index控制堆叠顺序，确保模态框、遮罩层和导航的层级关系正确；4. 清除浮动避免父容器塌陷，可使用overflow:hidden或伪元素clearfix。该方法在兼容旧项目中仍有实用价值。
多层浮动定位结合 position 实现复杂布局，关键在于理解 float 与 position 的作用机制，并合理组合使用。虽然现代布局更推荐 Flexbox 或 Grid，但在兼容旧项目或特定场景下，掌握 float 与 position 配合仍具实用价值。
1. 浮动（float）构建基础结构
使用 float 可让元素脱离正常文档流并靠左或靠右排列，常用于实现多列布局。
示例：两栏布局，侧边栏固定宽度，主内容自适应HTML：
侧边栏
主内容
CSS：
.sidebar {
float: left;
width: 200px;
background: #f0f0f0;
}
.main-content {
margin-left: 200px;
background: #e0e0e0;
}
2. 定位（position）实现层级叠加
在浮动布局基础上，通过 position: relative / absolute / fixed 控制定位层，实现悬浮、覆盖、固定等效果。
示例：在主内容区域上方叠加一个提示框
.main-content {
position: relative; /* 建立定位上下文 */
}
.tooltip {
position: absolute;
top: 10px;
right: 10px;
background: yellow;
padding: 5px;
z-index: 10;
}
这样 .tooltip 会相对于 .main-content 定位，浮在内容上方。
3. 多层嵌套与 z-index 控制层级
当多个定位元素重叠时，用 z-index 决定堆叠顺序。数值越大越靠前。
常见场景：模态框 + 遮罩层 + 固定导航
.navbar {
position: fixed;
top: 0; left: 0;
width: 100%;
z-index: 100;
}
.modal-mask {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
z-index: 200;
}
.modal {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
background: white;
z-index: 300;
}
通过不同 z-index 值确保模态框在最上层，遮罩次之，导航在普通内容之上。
4. 清除浮动避免布局塌陷
浮动元素可能导致父容器高度计算异常，需清除浮动。
常用方法：
- 给父容器添加 overflow: hidden
- 使用伪元素清除：
.clearfix::after {
content: "";
display: block;
clear: both;
}
基本上就这些。float 搭建结构，position 实现精确定位与层叠，配合 z-index 和清除浮动，就能实现复杂的多层浮动定位布局。虽然不如现代布局方式简洁，但在特定需求下依然有效。
