浮动导致父容器高度塌陷是典型问题，推荐用 display: flow-root 清除浮动；Flex/Grid 布局下浮动无效，应直接使用对应布局属性；移动端缩放易引发浮动错位，优先用 Flex/Grid 或 transform 替代。
浮动元素脱离文档流导致父容器高度塌陷
这是浮动布局最典型的问题：当子元素设置了 float: left 或 float: right，它会脱离普通文档流，父容器无法感知其高度，表现为高度为 0，背景、边框、后续兄弟元素位置都会异常。
常见现象包括：父 很多老项目沿用 一旦父容器启用 立即学习“前端免费学习笔记（深入）”； 这意味着： 在 iOS Safari 等浏览器中，若页面设置了 这不是清除浮动能解决的问题，根源在于： 清除浮动本身已不是难题，难的是判断「是否真的该用浮动」——现在绝大多数布局需求，
overflow: hidden 作为默认方案——它虽能触发 BFC 清除浮动，但会意外裁剪溢出内容（比如下拉菜单、阴影、定位元素）display: flow-root，它是专为此设计的现代方案，无副作用/* 推荐：现代、语义清晰、无副作用 */
.parent {
display: flow-root;
}clearfix 类在旧项目中仍需谨慎复用
.clearfix 类，核心是通过伪元素插入并清除浮动。但不同写法兼容性和行为差异明显：
::after 必须设 content: ""，否则伪元素不渲染display: table 或 display: block，仅 clear: both 不生效*zoom: 1 触发 hasLayout，但如今基本可忽略.clearfix::after {
content: "";
display: table;
clear: both;
}Flex 和 Grid 布局下无需清除浮动
display: flex 或 display: grid，子元素即使写了 float 也会被强制忽略——浮动属性在 Flex/Grid 容器中无效。
float 是冗余甚至误导的display: flex 同时存在，大概率是历史残留或开发者对布局机制理解有偏差flex-direction、justify-content 或 Grid 轨道定义移动端视口缩放与浮动元素的错位风险
viewport 缩放（如 user-scalable=yes），浮动元素可能在缩放后出现像素级错位或换行异常，尤其当宽度用百分比 + 浮动混搭时。
width: 99.9% 这类临界值，改用 max-width 或 Flex 替代transform: translateX() 配合定位替代部分场景display: flow-root、Flex 或 Grid 更安全、更可控。浮动真正适合的只剩少数场景，比如文字环绕图片，或兼容极老浏览器的降级方案。
