浮动布局已基本被flexbox和grid取代，但维护老项目、兼容IE8–IE10或调试遗留代码时仍需掌握；用float做多列布局必须清除浮动，否则父容器高度塌陷导致后续元素错位。
浮动布局在现代 CSS 中已基本被 flexbox 和 grid 取代，但理解它仍有现实必要：老项目维护、IE8–IE10 兼容需求、或调试遗留代码时，float 仍是绕不开的一环。直接说结论：用 float 做多列布局必须配合清除浮动，否则父容器高度塌陷，后续元素错位。
为什么 float 后父容器会“消失”？
因为 float 元素脱离普通文档流，父容器无法感知其高度。常见现象是：几个 float: left 的 div 并排显示了，但它们的父 div 在开发者工具里高度为 0px，紧贴其后的元素直接“上浮”到浮动元素下方。
- 这不是 bug，是
float的原始设计目的（文字环绕图片）导致的行为 - 只要父容器没设置固定高度，且内部只有浮动子元素，就必然塌陷
-
overflow: hidden或overflow: auto能触发 BFC，间接清除浮动，但可能截断阴影、下拉菜单等溢出内容
清除浮动的三种可靠写法
推荐按优先级排序，避免副作用：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
伪元素清除法（最推荐）：给父容器加
::after伪元素，并设clear: both -
空标签清除法（最直观）：在浮动元素末尾插入
<div style="clear:both"></div>，但污染 HTML 结构 -
BFC 触发法（慎用）：如
overflow: hidden，简单但有隐藏溢出的风险
.container::after {
content: "";
display: table;
clear: both;
}两栏/三栏浮动布局实操要点
核心是控制宽度与浮动方向，注意盒模型和边距叠加问题：
立即学习“前端免费学习笔记（深入）”；
- 所有浮动子元素宽度之和 + 边距 + 边框 ≤ 父容器宽度，否则最后一列会掉到下一行
- 用
box-sizing: border-box避免padding和border溢出计算——这是最常被忽略的兼容性坑 - 左栏固定宽、右栏自适应？左栏
float: left; width: 200px，右栏margin-left: 200px（不浮动），再加清除 - 三栏等宽？每栏
float: left; width: 33.333%，但需处理小数像素导致的换行，建议用calc(33.333% - 2px)预留间隙
浮动布局现在还该用吗？
新项目不要用。IE11 已停止支持，flexbox 的 display: flex + flex: 1 实现等宽自适应，比浮动稳定得多；grid 更适合复杂二维布局。但当你看到生产环境里还有 float: left 和 clear: both，别急着重写——先确认是否真有 IE9 兼容要求，再决定是局部修复还是整体迁移。浮动本身不难，难的是判断它是不是当前问题的真正解法。
