浮动元素换行或父容器塌陷的主因是盒模型默认content-box导致宽度计算偏差及bfc未触发；应统一box-sizing:border-box、用display:flow-root触发bfc或正确清除浮动。
浮动元素没贴着父容器边缘，宽度加起来明明没超
常见现象是几个 float: left 的盒子并排后，最后一个突然掉到下一行，但用开发者工具看每个盒子的 width、padding、border 加起来又没超过父容器。问题大概率出在「盒模型计算被忽略」——CSS 默认是 content-box，你写的 width: 200px 只算内容区，加上 padding: 10px 和 border: 1px 后实际占宽是 222px。
实操建议：
- 统一设
box-sizing: border-box，让 width 包含 padding 和 border - 检查是否意外触发了「BFC 边界收缩」：父容器没设高度、没触发 BFC，导致高度塌陷，视觉上像浮动失效
- 用
calc()算剩余空间时，注意单位混用（比如calc(50% - 20px)合法，calc(50% - 20)会直接失效
clear: both 不起作用，浮动还是重叠
典型错误是把 clear: both 加在浮动元素自己身上，或者加在一个没参与文档流的伪元素之外。它必须作用于「需要避开前面所有浮动」的那个元素本身，且该元素得在正常流中。
实操建议：
- 清除浮动要加在「浮动之后的第一个非浮动块级元素」上，不是加在浮动元素内部
- 更稳妥的方式是给父容器触发 BFC：
overflow: hidden、display: flow-root（推荐，语义清晰且无副作用） - 如果用
::after伪元素清除，确保它有content: ""且是块级（display: block），否则不渲染也不生效
display: flex 替代 float 后，老代码样式大面积错乱
这不是 bug，是布局模型切换带来的必然变化：float 是文档流内的「偏移」，flex 是完全独立的布局上下文。原有依赖浮动脱离文档流、文字环绕、或靠负 margin 微调位置的逻辑，全会失效。
实操建议：
- 不要全局替换
float，优先在新模块用display: flex或display: grid - 若必须迁移，重点检查三类地方：
margin是否还生效（flex item 的 margin 仍有效，但对齐方式变了）、vertical-align是否被忽略（flex 中无效）、文字环绕效果是否需改用shape-outside - IE11 对
display: flex支持有限，如需兼容，flex-wrap、gap、align-content等属性要查 Can I Use 数据，别凭经验写
父容器高度塌陷，子元素明明 float 了却看不见
这是浮动最经典的副作用：浮动元素脱离文档流，父容器无法感知其高度，于是高度变成 0，看起来像“消失”了。不是渲染失败，是父容器真的没高度。
实操建议：
- 最轻量解法：给父容器加
display: flow-root，现代浏览器全覆盖，不影响子元素定位，也不像overflow: hidden那样可能裁剪阴影或下拉菜单 - 避免用
height: auto强制撑开——它不解决塌陷，只是掩盖；同理，min-height也不能替代清除逻辑 - 如果父容器本身是
position: absolute或fixed，记得它本来就不参与文档流高度计算，此时塌陷是预期行为，不是 bug
浮动布局的坑不在语法多难，而在「失效」往往不报错、不警告，只默默换行或塌陷。最容易被忽略的是盒模型和 BFC 触发条件——它们不像 JS 报错那样直白，但每一步都决定浮动是否按你想象的方式工作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
