现代项目中float不应用于整体布局，仅适用于图文环绕等窄场景；display: flow-root是清除浮动最干净的方案，一行代码触发BFC、无副作用且主流浏览器全覆盖。
直接说结论：现代项目里，float不该用于整体布局，只在图文环绕等极窄场景保留；只要看到父容器高度塌陷、换行错位、clear失效，基本都是误用了float的信号。
display: flow-root 是清除浮动最干净的写法
它专为解决父容器高度塌陷而设计，一行代码触发 BFC，不裁剪溢出内容、不污染 DOM、不干扰子元素定位。
-
display: flow-root在 Chrome 64+ / Firefox 58+ / Safari 15.4+ 全覆盖，2026 年已无兼容顾虑 - 别用
overflow: hidden替代——它会裁掉position: absolute的下拉菜单、box-shadow、transform位移后的内容 - 如果必须兼容 IE11，才退回到伪元素
.clearfix::after，且必须带content: ""和display: table
float + inline-block 混用时空白符会变成真实间距
这不是浮动本身的问题，但常被归咎于float——HTML 中的换行和空格，在 inline-block 元素间会被渲染成约 4px 间隙。
- 现象：左浮图 + 右侧
display: inline-block文字块，右边总多出几像素空隙 - 临时解法：
font-size: 0写在父容器上，子元素再单独设字体大小 - 根治法：把右侧元素也改成
float: left或直接用display: flex，绕开这个坑
Flex/Grid 布局下写 float 是无效且误导的
一旦父容器设了 display: flex 或 display: grid，子元素的 float 属性会被浏览器忽略——它根本不起作用。
立即学习“前端免费学习笔记（深入）”；
- 如果你写了
float: left还在调clear: both，说明你没意识到布局上下文已切换 - 想让子项左对齐？用
justify-content: flex-start；右对齐？margin-left: auto更直接 - 历史代码里残留的
.clearfix类，若父容器已是flex，可安全删掉
响应式断点下浮动换行异常，本质是宽度计算失准
float 对容器尺寸极其敏感，小数像素偏差、字体缩放导致行高微变，都可能触发意外换行。
- 必须加
box-sizing: border-box，否则width: 50%+padding: 10px实际超宽 - 浮动元素总宽度（含
margin、border、padding）建议 ≤ 父容器宽度 − 1px，留容错空间 - 移动端缩放时，避免用
width: 99.9%这类临界值，改用max-width或 Flex 的flex-basis
真正难的不是怎么清浮动，而是判断“该不该用浮动”——多数时候，答案是否定的。文字环绕配图？可以。三栏响应式布局？不该。
