浮动元素导致父容器高度塌陷及兄弟元素上移，核心是父容器未包含浮动；应优先用overflow:hidden、display:flow-root或伪元素清除法解决。
浮动元素高度塌陷导致后续内容上移
这是最常见也最容易被忽略的问题：父容器没有设置高度，内部 float 元素脱离文档流后，父容器高度变为 0，导致后面的兄弟元素“钻”进浮动区域里。不是排列错乱，而是布局层级被破坏了。
解决核心是让父容器「包含浮动」。不要依赖 height 硬设（不灵活），优先用以下方式：
-
overflow: hidden或overflow: auto—— 简单有效，但注意会裁剪溢出内容 -
display: flow-root—— 现代标准方案，无副作用，兼容性到 Chrome 64+/Firefox 58+，推荐新项目使用 -
伪元素清除法：
.clearfix::after { content: ""; display: table; clear: both; }然后给父容器加class="clearfix"
浮动元素之间 margin 叠加或未生效
浮动元素的 margin 在某些方向上会“失效”，比如两个左浮动块，右边块的 margin-left 看似没起作用，其实是被左边块的右边界“顶住”了；而上下方向的 margin 则可能因塌陷而不表现。
关键点在于：浮动元素的外边距不会与普通流内元素发生折叠，但相邻浮动元素之间的 margin 是正常计算的 —— 前提是它们之间没有间隙、没有换行符干扰（HTML 中空格/换行会被解析为一个空格，可能造成意外间隙）。
立即学习“前端免费学习笔记（深入）”；
- 检查 HTML 源码是否有多余空白字符，建议写成紧凑格式：
- 避免对浮动元素同时设置
width和padding+border却忘了box-sizing: border-box，否则实际宽度超限导致换行 - 若需等距排列，用
margin-right统一控制间隔，最后一个元素用:last-child { margin-right: 0 }清除
浮动元素 width 计算错误引发换行
浮动元素总宽度（含 width + padding + border + margin）超过父容器宽度时，哪怕只多 1px，浏览器也会强制把最后一个元素挤到下一行 —— 表现为“错乱”，实则是空间不足。
常见陷阱：
- 父容器用了
width: 100%，但自身有padding或border，导致可用宽度变小 - 子元素用了
width: 50%，但加上margin: 10px后，实际占宽 > 50% - 字体大小、行高影响行框高度，间接导致浮动基线对不齐，视觉上像错位
调试建议：打开浏览器开发者工具，勾选「显示盒子模型」，逐个查看每个浮动元素的 Computed Width 和 Margin Edge，确认是否真的溢出。
现代替代方案比 float 更可靠
如果你还在用 float 做多列布局或图文环绕，说明你可能卡在老教程里了。CSS Grid 和 Flexbox 已经能覆盖绝大多数场景，且无塌陷、无换行陷阱、响应式更自然。
例如三栏等宽布局，用 Flex 只需：
.container {
display: flex;
}
.item {
flex: 1;
margin: 0 10px;
}
.item:first-child { margin-left: 0; }
.item:last-child { margin-right: 0; }
而 Grid 更适合复杂二维排列。继续硬调 float + width + margin 的组合，本质是在用过时机制模拟现代布局，越调越容易漏掉某个像素级偏差。
真正难的不是怎么修 float 错乱，而是判断——这个需求，还值得用 float 吗？
