父容器高度塌陷是浮动元素脱离文档流的必然结果，非bug；推荐用clearfix伪元素（content:""+display:table+clear:both）或现代display:flow-root方案清除浮动。
因为 float 让元素脱离文档流，父容器无法计算高度，后续块级元素自然“上浮”到浮动区域下方或侧边——这不是 bug，是它原本就为图文环绕设计的逻辑。
父容器高度塌陷是错乱的起点
浮动元素不参与父容器的高度计算，只要父容器内全是 float 子项，且没其他内容撑开，它的 computed height 就可能是 0px。此时背景、边框不可见，紧随其后的段落、footer 会直接顶上来，看起来像“穿模”。
- 用开发者工具 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 - 统一写
* { box-sizing: border-box; }，避免不同元素盒模型不一致 - 别信
width: 25%能四等分——有1px边框和8px水平margin时，得写width: calc(25% - 2px - 16px)
现代项目里，float 错乱本质是工具误用
float是为文字环绕图片设计的，不是布局系统。你反复调clear、算calc()、查box-sizing，其实是在对抗它的原始语义。- 两栏/多列布局：用
display: flex+flex-wrap: wrap，子项设flex: 1 1 280px，天然对齐、不塌陷、不换行错位 - 需要语义顺序与视觉顺序分离？
order属性比倒写 HTML + 混合float更干净 -
display: flow-root是专为解决浮动塌陷而生，无裁剪副作用，比overflow: hidden更精准
真正容易被忽略的是：浮动错位从来不是样式写得不够细，而是你在用图文环绕机制强行做布局。
- 常见错误：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
