CSS 浮动（Float）
核心概念
- 正常文档流 = 排队，每个人按顺序站好，一个接一个
- 浮动 = 插队！让某个元素”飘”到左边或右边，后面的人会自动围着它站
直观演示
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
</style>
</head>
<body>
<h2>案例1：没有浮动（正常排队）</h2>
<div style="border: 2px solid #333;">
<div style="background: lightblue; padding: 20px;">我是普通div</div>
<div style="background: lightgreen; padding: 20px;">我是后面来的div</div>
</div>
<hr />
<h2>案例2：左浮动（飘到左边）</h2>
<div style="border: 2px solid #333; overflow: hidden;">
<div
style="background: lightblue; padding: 20px; float: left; width: 100px;"
>
我左
</div>
<div style="background: lightgreen; padding: 20px;">
我正常排队的div，会围着左边这个盒子站
</div>
</div>
<hr />
<h2>案例3：右浮动（飘到右边）</h2>
<div style="border: 2px solid #333; overflow: hidden;">
<div
style="background: lightblue; padding: 20px; float: right; width: 100px;"
>
我右
</div>
<div style="background: lightgreen; padding: 20px;">
我正常排队的div，会围着右边这个盒子站
</div>
</div>
<hr />
<h2>案例4：两个都左浮动（并排站）</h2>
<div style="border: 2px solid #333; overflow: hidden;">
<div
style="background: lightblue; padding: 20px; float: left; width: 45%;"
>
浮动盒子1
</div>
<div
style="background: lightgreen; padding: 20px; float: left; width: 45%;"
>
浮动盒子2
</div>
</div>
</body>
</html>浮动的三条本质
- 浮动的元素会飘起来 → 脱离正常文档流
- 后面的元素会围着它 → 文字/其他 div 会紧贴浮动元素的边
- 多个同方向浮动会并排 → 两个都
float: left就会挨着排
最大坑：父元素塌陷
<div style="border: 2px solid red;">
<div style="background: lightblue; float: left;">我浮动</div>
<div style="background: lightgreen; float: left;">我也浮动</div>
</div>红色边框的父 div 包了两个浮动子元素，但父 div 的高度变成了 0——浮动元素”飘出去”了，父 div 看不到它们。
解决方法
| 方法 | 写法 |
|---|---|
| overflow 清除 | 父元素加 overflow: hidden 或 overflow: auto |
| 伪元素清除 | 父元素加 ::after { content: ''; clear: both; } |
| Flexbox 替代（推荐） | 用 Flexbox 替代浮动，现在主流做法 |
现在还用浮动吗？
几乎不用了。Flexbox 和 Grid 更强大、更简单，浮动能做的事这俩都能做，还做得更好。
但需要了解的原因：
- 老项目可能还有浮动代码，得能看懂
- 理解浮动有助于理解「文档流」「脱离文档流」这些核心概念