float 是为图文环绕设计的文本流机制，非布局系统，会导致父容器塌陷、清除逻辑冗余、响应式不可控；Flexbox 和 Grid 从模型层面规避了这些问题。
因为 float 本质是为图文环绕设计的文本流机制，不是布局系统；它导致父容器高度塌陷、清除逻辑冗余、响应式行为不可控，而 Flexbox 和 Grid 从模型层面就规避了这些问题。
float 导致父容器高度塌陷是必然，不是 bug
设置 float: left 或 float: right 的元素会脱离文档流，但又不完全脱离（仍影响邻近行内内容），所以父容器无法感知其存在。你看到背景色消失、footer 上移、border-bottom 不显示，不是漏写了样式，而是浏览器按规范必须这么算。
-
overflow: hidden能“撑开”高度，但会意外裁剪position: absolute的下拉菜单或阴影 -
::after { clear: both }需额外伪元素，且若父容器本身有height或max-height，可能触发非预期滚动条 -
display: flow-root是标准清除方案，但它只该用于兜底老代码，新布局不该以“需要清浮动”为前提来设计
Flexbox 容器里写 float: left 会被浏览器直接忽略
规范明确要求：在 display: flex 或 display: grid 的直接子元素上设置 float，该属性无效；clear 同样无效。但有两个例外容易踩坑：
-
float写在 flex/grid 子项的**内部元素**上（比如.card > img { float: left; }），它只影响那个子项内部的文字流，父 flex 容器完全不感知 - 若外层是 flex，内层又嵌套了
float + clear，而clear目标是另一个已脱离文档流的元素（比如position: absolute），那clear会彻底失效，且无任何报错提示
移动端掉行、热区偏移、字体放大后错位，不是 bug 是 float 的固有行为
float 依赖固定宽度，不响应空间变化。视口缩放、iOS “更大字体”、安卓 WebView 对 float + inline-block 的解析偏差，都会让 float: left 元素突然换行或消失——这不是渲染异常，而是它本就不该处理这些场景。
立即学习“前端免费学习笔记（深入）”；
- 小屏下
width: 50%+padding就可能超100%，直接掉行 - 按钮点击无反应，常因浮动后渲染坐标偏移，但触摸热区未同步扩展
- JS 若读取了
getBoundingClientRect()或offsetLeft，这些值在float下和flex下可能不同，需重新验证
真正难处理的不是“怎么清除浮动”，而是改一处样式，三处逻辑跟着崩——尤其是当 JS 隐式依赖浮动触发的 BFC，或第三方组件内部硬编码了 float: left 时，浏览器会优先执行 float，再套 flex，结果不可控。
