浮动导致父容器高度塌陷是典型问题，推荐用 display: flow-root 清除浮动；Flex/Grid 布局下浮动无效，应直接使用对应布局属性；移动端缩放易引发浮动错位，优先用 Flex/Grid 或 transform 替代。
浮动元素脱离文档流导致父容器高度塌陷
这是浮动布局最典型的问题：当子元素设置了 float: left 或 float: right，它会脱离普通文档流，父容器无法感知其高度，表现为高度为 0，背景、边框、后续兄弟元素位置都会异常。
常见现象包括：父 <div> 没有背景色、内容被压到上方、下方元素上移覆盖浮动区域。
- 不要依赖父容器设置固定高度来“修复”，这破坏响应性且不可维护
- 避免对父容器使用
overflow: hidden作为默认方案——它虽能触发 BFC 清除浮动，但会意外裁剪溢出内容（比如下拉菜单、阴影、定位元素） - 推荐优先使用
display: flow-root，它是专为此设计的现代方案，无副作用
/* 推荐：现代、语义清晰、无副作用 */
.parent {
display: flow-root;
}clearfix 类在旧项目中仍需谨慎复用
很多老项目沿用 .clearfix 类，核心是通过伪元素插入并清除浮动。但不同写法兼容性和行为差异明显：
-
::after必须设content: ""，否则伪元素不渲染 - 必须设
display: table或display: block，仅clear: both不生效 - IE6/7 需额外支持
*zoom: 1触发 hasLayout，但如今基本可忽略
.clearfix::after {
content: "";
display: table;
clear: both;
}Flex 和 Grid 布局下无需清除浮动
一旦父容器启用 display: flex 或 display: grid，子元素即使写了 float 也会被强制忽略——浮动属性在 Flex/Grid 容器中无效。
立即学习“前端免费学习笔记（深入）”；
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
这意味着：
- 在 Flex/Grid 布局中写
float是冗余甚至误导的 - 如果看到“清除浮动”代码和
display: flex同时存在，大概率是历史残留或开发者对布局机制理解有偏差 - 想实现类似浮动的排列效果，应直接用
flex-direction、justify-content或 Grid 轨道定义
移动端视口缩放与浮动元素的错位风险
在 iOS Safari 等浏览器中，若页面设置了 viewport 缩放（如 user-scalable=yes），浮动元素可能在缩放后出现像素级错位或换行异常，尤其当宽度用百分比 + 浮动混搭时。
这不是清除浮动能解决的问题，根源在于：
- 浮动计算依赖视口尺寸，而缩放会动态改变设备像素比与 layout width
- 避免对浮动元素同时设置
width: 99.9%这类临界值，改用max-width或 Flex 替代 - 真需要浮动+缩放兼容，建议用
transform: translateX()配合定位替代部分场景
清除浮动本身已不是难题，难的是判断「是否真的该用浮动」——现在绝大多数布局需求，display: flow-root、Flex 或 Grid 更安全、更可控。浮动真正适合的只剩少数场景，比如文字环绕图片，或兼容极老浏览器的降级方案。
