浮动错乱本质是工具误用，其设计本意是文字环绕图片而非布局；应优先使用flex、flow-root等现代方案替代float。
因为浮动元素脱离文档流，父容器无法感知其尺寸，后续块级元素会“上浮”到浮动元素下方或侧边，造成视觉错位——这不是 bug，是 float 的设计本意。
浮动元素脱离文档流，父容器高度塌陷
浮动后，height 计算不包含浮动子项，父容器 computed height 可能为 0px。此时背景、边框不可见，下方元素直接顶上来，看起来像“错乱”。
- 在开发者工具 Layout 面板勾选 “Show box model”，一眼就能看出父容器实际边界是否包裹子项
- 临时验证：给父容器加
overflow: hidden，若布局立刻正常，基本可断定是塌陷问题 - 不要给
<table> 或 <code><ul></ul>这类语义化元素的父容器设float，它们自身有默认渲染逻辑，叠加浮动极易触发不可控重排clear: both 加错位置，反而加剧错乱
clear: both不是对浮动元素本身生效，而是让「当前元素」避开前面所有浮动的影响。加在错误位置等于没加，甚至把原本正常的流打断。- 常见错误：
<div style="clear:both"></div>写在浮动元素之前，或插在两个浮动元素中间 - 正确做法：清除元素必须是浮动元素的**下一个兄弟元素**，且为块级（
display: block或display: flow-root） - 伪元素清除（
::after）失效？检查父容器是否设置了固定height，会截断伪元素高度，导致清除失败
宽度计算误差导致换行错位
浏览器按像素四舍五入判断是否换行，只要总宽超 1px，整行就塌。而
margin、border、padding、字体渲染差异都会悄悄吃掉空间。立即学习“前端免费学习笔记（深入）”；
- 用开发者工具看浮动子项的
Computed样式，手动加总width + padding-left + padding-right + border-left-width + border-right-width + margin-left + margin-right - 统一写
*, *::before, *::after { box-sizing: border-box; }，避免不同元素盒模型不一致 - 别信
width: 25%能四等分——有1px边框和8px水平margin时，得写width: calc(25% - 2px - 16px)
现代项目里，浮动错乱本质是工具误用
float 是为文字环绕图片设计的，不是布局系统。你反复调
clear、算calc、查box-sizing，其实是在对抗它的原始语义。- 两栏/多列布局：用
display: flex+flex-wrap: wrap，子项设flex: 0 0 calc(33.33% - 16px)，天然对齐、不塌陷、不换行错位 - 需要语义顺序与视觉顺序分离？
order属性比倒写 HTML + 混合float: left/right更干净 - IE9+ 已支持
display: flow-root，它专为解决浮动塌陷而生，无裁剪副作用，比overflow: hidden更精准
真正容易被忽略的是嵌套层级：外层用了
flow-root，里面某个子模块又单独浮动了一组卡片，那这个子模块的父容器仍需独立清理——浮动影响不会自动穿透 BFC 边界。 - 常见错误：
