浮动元素高度不一致会导致父容器塌陷、文字环绕错位及清除浮动后margin异常，即使使用Flex/Grid也需警惕遗留float破坏布局。
浮动元素高度不一致导致父容器塌陷
当多个 float: left 或 float: right 的子元素高度不同，而父容器没有清除浮动时，父容器的 height 会计算为 0（或仅包含非浮动内容的高度），造成视觉上“父容器消失”——背景色、边框、阴影全部失效，后续元素向上挤入浮动区域。
- 典型表现：父容器的
background-color看不见，border不包裹子元素 - 根本原因：浮动元素脱离文档流，父容器无法感知其真实高度
- 不是所有浏览器都一样：IE6/7 中更易触发，现代浏览器行为一致但问题依旧存在
文字环绕错位与行框重叠
浮动元素常用于图文混排（如图片左浮、文字右绕）。若同级浮动块高度差异大（例如一张高图 + 一段短说明 + 一个高卡片），后续普通流中的文字可能从“中间高度”开始环绕，导致行框（line box）被异常截断或重叠。
- 错误现象：
line-height正常但段落首行缩进错乱、字间距突变、部分文字被遮挡 - 触发条件：浮动元素未设置明确
clear，且相邻非浮动内容高度不足以“撑开”下一行 - 调试技巧：给浮动元素加
outline: 1px solid red，观察实际占据空间是否与预期一致
清除浮动时的 margin 折叠失效与间隙异常
用 clear: both 元素（如 <div style="clear:both"></div>）或伪元素 ::after 清除浮动后，原本正常的外边距（margin-bottom）可能突然“消失”或“翻倍”，尤其在浮动块与清除元素之间。
- 原因：清除元素本身是块级、无高度，其
margin与前一个浮动块不参与标准 margin 折叠；但若清除元素后面紧跟另一个块，它的margin-top又可能和该块折叠，造成不可控间隙 - 推荐写法（避免 hack）：
.clearfix::after { content: ""; display: table; clear: both; } - 注意：不要对清除元素设
height: 0或overflow: hidden，这会干扰父容器内联上下文
Flex/Grid 替代方案中仍需警惕遗留浮动
即使项目已全面使用 display: flex 或 grid，若第三方组件、老代码片段或 CMS 输出中残留 float 样式，仍会破坏新布局的尺寸计算逻辑——尤其是当浮动元素嵌套在 flex item 内部时，它会脱离 flex 容器的主轴控制，导致对齐错乱、溢出隐藏失效。
立即学习“前端免费学习笔记（深入）”；
- 检查方法：在 DevTools 中搜索页面是否存在
float: left/float: right声明，特别关注img、aside、.widget类 - 安全兜底：
* { float: none !important; }（仅限调试阶段，上线前必须定位并移除源头） - 真正可靠的解法：用
display: contents（慎用，兼容性有限）或重构 DOM 结构，而非靠覆盖样式硬压
浮动本身不复杂，但高度不一致带来的连锁反应往往藏在视觉边缘——比如打印样式错位、无障碍阅读器顺序混乱、或者某个深夜上线后用户反馈“首页第二屏文字看不见了”。这些都不是浏览器 bug，而是浮动机制在真实场景中必然暴露的边界行为。
