CSS中的float属性自诞生起就承担着文字环绕与多栏排版的使命。当一个元素被设定为浮动后，它会脱离正常的文档流，向左或向右移动，直到它的外边缘碰到包含块边缘或者其他浮动框为止。这种行为虽然简单，却常常让初学者在父容器高度塌陷、兄弟元素错位上栽跟头。真正掌握浮动，不能只记语法，还要理解它如何影响盒模型与行框生成。
一、float属性的基本语法与取值
float属性在CSS中接受几个关键值：left、right、none以及CSS3后来引入的inline-start和inline-end。最常用的是前三个。给一个块级元素设置float:left之后，它就会尽可能靠左摆放，同时宽度不再占满整行，而是收缩为内容宽度，除非显式声明width。
下面的例子展示了一个图片向左浮动、段落文字自动环绕的效果。这是浮动最原始的设计意图，即便在今天也依然合适。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<style>
.pic { float: left; margin: 0 12px 12px 0; }
</style>
</head>
<body>
<img class="pic" src="https://picsum.photos/120/120?random=2" alt="示例图">
<p>这是一段说明文字，它会自动环绕在图片右侧。浮动让图文混排变得自然，不需要任何额外定位属性。</p>
</body>
</html>
需要注意的是，浮动元素会生成块级框，即便原来行内元素如<span>，一旦浮动也会表现得像块级框，可以设置宽高。这一点在调试时容易被忽略，造成布局预期偏差。
二、浮动引发的父容器高度塌陷
当父容器内所有子元素都浮动时，父容器在普通流中就没有可支撑高度的内容，于是高度计算为0。这在视觉上表现为背景色消失、边框贴在一起，后续布局整体向上平移。很多人在写导航条或卡片列表时遇到过这种怪象。
解决思路分为两类：一是让父容器自身也形成包含浮动的新块格式化上下文（BFC），例如设置overflow:hidden；二是使用清除浮动技术，在父容器末尾插入清除节点。后者更通用，也不会裁剪溢出内容。
/* 方法一：触发BFC */
.parent { overflow: hidden; }
/* 方法二：clearfix伪元素方案 */
.clearfix::after {
content: "";
display: block;
clear: both;
}
两种方案各有适用场景。overflow:hidden简单但会隐藏超出部分，不适合下拉菜单等需要溢出的组件；clearfix则无副作用，是社区公认的最佳实践。实际项目中推荐把clearfix写成公用类，按需挂在父节点上。
三、使用float实现双栏与三栏布局
在Flexbox与Grid普及前，浮动是实现栏布局的主力。典型双栏做法：侧边栏浮动，主内容区设置外边距避免重叠。三栏则可左右各浮动一个，中间留自适应空隙。
看一段双栏结构代码，左侧固定宽度浮动，右侧通过margin-left避开：
<div class="wrap clearfix"> <aside class="side">侧边栏</aside> <main class="content">主体内容区域</main> </div>
.side {
float: left;
width: 200px;
background: #f0f0f0;
}
.content {
margin-left: 212px;
background: #fff;
}
这种写法兼容性好，但缺陷明显：HTML中侧边栏必须写在主内容之前，否则右栏会被挤下；且清除浮动忘了加就会崩。现代开发更建议用Flex，但若维护老项目，理解上述机制必不可少。
四、clear属性与环绕控制
clear属性规定元素的哪一侧不允许出现浮动元素，取值有left、right、both。它只能作用于块级元素，对行内元素无效。常用来强制换行或终止环绕。
例如在图文列表后放一个footer，希望它永远在最底下，不受上面浮动干扰：
.footer {
clear: both;
border-top: 1px solid #ccc;
}
合理使用clear能精准控制文档流回归点。但滥用会导致大量空白，因为clear元素会下移直到越过所有浮动。配合margin仍需注意折叠问题。
五、浮动与现代布局方案的对比
Flexbox以一维排布见长，Grid胜任二维网格，二者均不需脱离文档流，也就没有塌陷烦恼。下表简要对比：
| 特性 | float | flex | grid |
|---|---|---|---|
| 是否脱离文档流 | 是 | 否 | 否 |
| 垂直居中难度 | 高 | 低 | 低 |
| 老IE兼容性 | 好 | 较差 | 差 |
结论很清晰：新项目优先Flex或Grid，旧系统改造时再补浮动知识。但面试与排错中，浮动原理仍是硬核基础，不可跳过。
六、常见误区与调试技巧
有人以为给浮动元素加display:block就能解决一切，其实浮动本身已隐式改变显示类型。还有人用空<div>写clear，虽有效但污染结构。推荐始终采用伪元素clearfix。
调试时打开浏览器开发者工具，观察盒模型是否高度为0，以及computed里float值是否生效。若发现预期外的换行，检查是否漏写clear或宽度溢出。掌握这些，浮动就不再可怕。