display: flow-root是首选方案，它专为解决浮动塌陷而设计，创建bfc使父容器包含浮动子元素，不裁剪溢出内容、不干扰定位，chrome 64+等现代浏览器全面支持。
直接用 display: flow-root 就能防止浮动换行导致的布局错乱，不用写伪元素、不裁剪弹层、不干扰定位——这是现代浏览器下最干净的解法。
为什么 float 换行会错乱？
浮动元素脱离文档流后，浏览器只按“当前行还能不能塞下下一个”做粗略判断，不感知容器剩余空间。一旦某个元素因 padding、border 或 HTML 空格多占 1px，整行就崩了。这不是你算错了百分比，是 float 机制本身不支持栅格对齐。
- 漏写
box-sizing: border-box→width: 25%+padding: 8px实际超 100% - HTML 中浮动元素间有换行或空格 → 渲染器插入约 4px 间隙
- 父容器没触发 BFC → 高度塌陷，后续内容上浮覆盖，你以为“错行”其实是“被盖住了”
display: flow-root 怎么用才真正生效？
display: flow-root 是专为解决浮动塌陷设计的，它创建一个独立的块级格式化上下文（BFC），让父容器重新包含所有浮动子项，且不裁剪 position: absolute 下拉菜单、阴影或 transform 位移后的区域。
- 必须加在浮动元素的**直接父容器**上，比如
.card-list或.image-grid - 不能和
height、max-height同时设，否则可能截断内容或伪元素 - 兼容性足够：Chrome 64+、Firefox 58+、Safari 12.1+，仅需支持 IE11 时退回到
overflow: hidden
响应式断点里最容易被忽略的坑
PC 看着正常，一缩到平板尺寸突然错位，大概率不是媒体查询没写，而是忘了在断点中重置父容器的 BFC 触发方式。
- 别只改子项：
@media (max-width: 768px) { .item { float: none; width: 100%; } }—— 这只是让元素不飘了，但父容器仍塌陷 - 必须同步更新父容器：
@media (max-width: 768px) { .container { display: flow-root; } } - 如果 PC 用的是
overflow: hidden，小屏媒体查询里把它覆盖成visible，塌陷立刻复现
真正难调的从来不是 margin 或 clear，而是浮动机制与响应式宽度计算之间的像素级博弈。只要还在用 float 做布局，就得同时盯住三件事：盒模型、HTML 结构、BFC 触发层级——缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
