浮动元素导致父容器塌陷时，应通过overflow:hidden或伪元素清除浮动来让父容器重新包含子元素，而非硬调高度；多浮动元素错乱需检查宽度总和、HTML空白符及clear作用对象；现代布局优先选Flex/Grid，但图文环绕等场景float仍适用。
浮动元素跑出父容器怎么办
这是最常见的浮动失控行为：子元素加了 float: left 或 float: right 后，父容器高度塌陷，看起来像“飘”出了容器外。根本原因是浮动元素脱离文档流，父容器无法感知其高度。
解决不是靠调大父容器 padding 或 height（治标），而是让父容器「重新包含」浮动子元素：
- 给父容器加
overflow: hidden（最轻量，但会裁剪溢出内容） - 用伪元素清除浮动：
.parent::after { content: ""; display: table; clear: both; } - 避免用
clear: both直接加在父容器上——它只对兄弟元素生效，对子元素无效
多个浮动元素顺序错乱或换行异常
浮动元素默认从左到右（float: left）或右到左（float: right）依次排列，但宽度总和超容器、或存在空白符/换行符产生的间隙，都会导致意外换行。
检查这几处：
立即学习“前端免费学习笔记（深入）”；
- 所有浮动元素的
width加边框/内边距不能超过父容器实际可用宽度（注意 box-sizing 默认是content-box） - HTML 中浮动元素之间不要有多余换行或空格，否则可能被渲染为 4px 左右间隙（尤其 inline 元素如
） - 如果想强制某元素不与前一个浮动元素同行，给它加
clear: left（对应float: left）或clear: right（对应float: right）
clear 属性没起作用？看清楚作用对象
clear 不是“清除前面所有浮动”，而是“让当前元素的上边界避开指定方向的浮动元素”。它只影响自身，且只对**同级的、已浮动的兄弟元素**生效。
典型误用：
- 给浮动子元素自己加
clear: left—— 没意义，它前面没兄弟浮动元素 - 在父容器上写
clear: both—— 父容器没有兄弟浮动元素，clear 无目标 - 期望
clear: both让后续非浮动元素“回到正常流顶部”——它只控制上边距位置，不重置文档流起点
现代替代方案要不要直接上 Flex/Grid
如果你只是想实现两栏布局、图文环绕、或横向排列按钮这类场景，float 已不是首选。Flexbox 更可控，且无清除烦恼：
比如替代 float: left 多列布局：
.container {
display: flex;
}
.item { flex: 1; }
但注意：如果要兼容 IE9 及更早版本，float 仍是唯一可靠选择；另外，纯文本环绕图片（float: left + 段落自然折行）目前仍比 shape-outside 更稳定。
别为了“不用 float”而强行替换——先确认需求是否真需要脱离文档流，还是只是想要排列效果。
