CSS Float（浮动）
浮动（float）是 CSS 里最经典的布局手段之一：它能让元素向左或向右"漂移"，让文字与行内元素环绕在它周围，常用于图文混排和两栏布局。学会 float 并掌握"清除浮动"，是每个 CSS 初学者的必修课。
什么是浮动
float 属性定义元素向哪个方向浮动，常用取值有三个：
float: none; /* 默认值，元素不浮动 */
float: left; /* 向左浮动，后续内容环绕其右侧 */
float: right; /* 向右浮动，后续内容环绕其左侧 */
元素一旦设置浮动，就会脱离普通文档流，向指定方向移动，直到碰到父容器边界或另一个浮动元素为止。
图文混排示例
float 最常见的用途是让文字环绕图片，形成类似报纸的排版效果：
<!DOCTYPE html>
<html>
<head>
<style>
img { float: left; margin-right: 10px; }
</style>
</head>
<body>
<img src="flower.jpg" width="120" alt="花朵">
<p>这是一段足够长的文字，它会自动环绕在浮动图片的右侧逐行排布，读起来图文并茂。</p>
</body>
</html>
运行效果：图片停留在段落左上方，文字紧贴图片右侧换行环绕，版面紧凑美观。
清除浮动（clear）
浮动元素不占据普通文档流的高度，后面的块级元素可能"顶"到它下面。clear 属性用来规定元素的哪一侧不允许出现浮动元素：
clear: left; /* 左侧不允许浮动元素 */
clear: right; /* 右侧不允许浮动元素 */
clear: both; /* 两侧都不允许，最常用 */
img { float: left; }
p.after-image { clear: both; } /* 这段文字换到图片下方 */
对紧跟在浮动元素后的元素应用 clear: both，它就会乖乖排到浮动元素的下方而不是旁边。
父容器塌陷与 clearfix
当父容器里的所有子元素都浮动后，父容器高度会塌陷为 0，背景与边框显示不出来。经典的解决方法是给父容器加 clearfix 类：
.clearfix::after {
content: "";
display: block;
clear: both; /* 用伪元素在容器末尾清除浮动 */
}
<div class="clearfix" style="background: #eee;">
<div style="float: left; width: 45%;">左栏内容</div>
<div style="float: right; width: 45%;">右栏内容</div>
</div>
运行效果：父容器重新被"撑起"，浅灰色背景正常显示，两个浮动子元素左右各占一半并排而立。
用浮动搭建两栏布局
在 Flex 布局普及之前，float 常被用来搭建网页骨架：左栏固定宽度，右栏自适应。
.left {
float: left;
width: 200px; /* 左栏固定 200 像素 */
background: #ccc;
}
.right {
margin-left: 210px; /* 预留左栏宽度加间隔 */
}
运行效果：左侧导航固定 200 像素宽，右侧内容区自动占满剩余宽度；注意 margin 需比左栏略宽以留出空隙。
小结
float 让元素脱离文档流并左右浮动，配合文字环绕可实现图文混排；浮动引起的父容器塌陷要用 clear 或 clearfix 清除。如今新项目更推荐用 Flex 布局，但理解 float 依然能帮你读懂大量旧代码。