浮动（float）是CSS布局的核心属性，通过float:left/right使元素脱离正常文档流，实现文本环绕图片、多列排列等效果，浮动元素会占据空间，影响后续元素位置，可能引发父元素高度塌陷，需配合clear属性（left/right/both）清除浮动以恢复正常布局，图解通常直观展示浮动元素脱离文档流后的布局变化，如周围元素如何环绕浮动元素，以及清除浮动后父元素高度恢复正常的过程，帮助理解浮动的工作原理及应用场景。
CSS浮动与定位完全指南：图解详解布局核心原理
在CSS布局的世界中，浮动（Float）和定位（Position）是两大核心概念，也是初学者最易混淆的知识点，浮动曾主导早期网页布局，而定位则覆盖了覆盖层、弹窗等复杂场景，本文将通过图解+代码的方式，从底层原理到实践应用,彻底剖析浮动与定位的运作机制和技巧。
CSS浮动：从“文字环绕”到“多列布局”
什么是浮动？
浮动（float）是CSS中最早实现多列布局的属性，其核心作用是使元素脱离正常文档流，并沿左/右方向浮动,直至遇到父元素边界或另一个浮动元素。
语法：float: left | right | none | inherit；默认值为none。
浮动的核心特性（图解说明）
（1）脱离文档流
正常文档流中，块级元素（如div）垂直排列，行内元素（如span）水平排列，一旦元素设置浮动，它会脱离文档流，不再占据原始位置，后续元素会“无视”其空间并向上填充。
图解1：脱离文档流效果
<div class="normal">正常块级元素</div>
<div class="float">浮动元素</div>
<div class="after">后续元素</div>
/ CSS /
.normal { width: 200px; height: 50px; background: #f00; }
.float { width: 150px; height: 50px; background: #0f0; float: left; }
.after { width: 200px; height: 50px; background: #00f; }
图示说明：
- 未浮动时，三个
div垂直排列（上→下） - 当
.float设置float: left后，它脱离文档流向左浮动；.after直接向上填充至.normal下方，形成视觉重叠（实际.float覆盖在.after上方）
（2）包裹性与破坏性
- 包裹性：浮动元素的宽度会收缩至内容大小（除非显式设置），即使父元素有剩余空间
- 破坏性：浮动元素脱离文档流会导致父元素高度塌陷（父元素无法正确包裹浮动子元素）
图解2：包裹性与高度塌陷
<div class="parent">
<div class="float-child">浮动子元素</div>
</div>
/ CSS /
.parent { border: 2px solid #000; / 父元素高度由子元素撑开 / }
.float-child { width: 100px; height: 50px; background: #ff0; float: left; }
图示说明：
- 父元素
.parent未设置高度时，仅靠浮动子元素.float-child撑开高度 - 由于
.float-child脱离文档流，父元素高度计算会忽略它（若无非浮动子元素,高度可能为0）
（3）相邻浮动元素对齐
多个浮动元素会水平排列，直至遇到父元素边界或另一个浮动元素,随后换行。
图解3：浮动元素水平排列
<div class="parent">
<div class="float-child1">子元素1</div>
<div class="float-child2">子元素2</div>
<div class="float-child3">子元素3</div>
</div>
/ CSS /
.parent { border: 2px solid #000; width: 300px; }
.float-child { width: 80px; height: 50px; float: left; margin: 5px; }
.float-child1 { background: #ff0; }
.float-child2 { background: #f0f; }
.float-child3 { background: #0ff; }
图示说明：
- 三个浮动子元素宽度均为80px + margin 10px = 90px > 父元素宽度300px时，三元素水平排列；若父元素宽度不足（如200px），第三个子元素会换行显示
浮动的清除：解决高度塌陷
浮动元素会导致父元素高度塌陷，影响后续布局,常用清除方法：
（1）额外标签法（不推荐）
在浮动元素后添加空标签：<div style="clear: both;"></div>,强制清除浮动。
（2）父元素添加overflow: hidden
通过触发BFC（块级格式化上下文）让父元素包裹浮动子元素。
（3）after伪元素法（推荐）
.clearfix::after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
CSS定位：从“相对偏移”到“精确覆盖”
定位（position）是CSS中更强大的布局工具，允许元素相对于正常位置、父元素、视口甚至页面进行偏移，核心属性是position，配合top、bottom、left、right控制偏移量。
