清除浮动是解决最后一个元素下移的根本方法，因父容器高度塌陷导致；box-sizing: border-box 仅防尺寸溢出间接辅助，现代布局应优先使用 flex 或 grid。
浮动布局中最后一个元素下移，通常是因为父容器没有清除浮动，导致高度塌陷，后续元素被“挤”到浮动元素下方。而 box-sizing: border-box 本身不直接解决下移问题，但它能防止因 padding/border 导致的宽度超出，间接避免因尺寸计算错误引发的浮动错位。
清除浮动是根本解法
父容器未包裹浮动子元素，是下移的主因。必须让父容器“感知”到浮动元素的高度：
- 给父容器设置
overflow: hidden或overflow: auto（触发 BFC） - 在最后一个浮动元素后添加空元素并设
clear: both - 使用伪元素清除（推荐）：
.clearfix::after { content: ""; display: table; clear: both; }
然后给父容器添加class="clearfix"
box-sizing:border-box 的作用是防“撑破”
当浮动元素设置了 width: 50%，又加了 padding: 10px 和 border: 1px solid，默认盒模型下总宽 = 50% + 20px + 2px → 超出父容器，可能触发换行或挤压其他浮动项。此时：
- 统一写
* { box-sizing: border-box; }（全局重置） - 确保
width: 50%包含 padding 和 border，真正占满半宽 - 配合 float 使用时，能稳定多列等宽布局，减少意外溢出
检查是否遗漏了 display 或 white-space
有时下移看似是浮动问题，实则是：
立即学习“前端免费学习笔记（深入）”；
- 浮动元素被设了
display: inline或vertical-align，干扰基线对齐 - 父容器有
white-space: nowrap，但子元素未设white-space: normal，影响换行逻辑 - 字体大小、行高在浮动容器中产生不可见间隙，可尝试
font-size: 0于父级再重设子级
现代替代方案更可靠
浮动本就不是为复杂布局设计的。如需多栏、响应式排列，优先考虑：
-
display: flex：父容器设display: flex，天然不塌陷，无须清除 -
display: grid：定义行列明确，完全摆脱浮动副作用 - 若必须兼容老浏览器，用浮动 + 清除 +
box-sizing组合仍是稳妥选择
