浮动元素总宽度=width+左右padding+左右border+左右margin；哪怕超1px即换行，需用box-sizing:border-box控制子项、calc()扣减边距、确保父容器形成bfc并清理html空白。
根本原因不是 float 写错了，而是“总宽度超了”或“父容器不给空间”。
浮动元素总宽度怎么算才准？
浏览器判断换行的依据是：每个浮动元素的 border-box width（即 width + padding + border + margin）之和是否 ≤ 父容器可用宽度。
- 哪怕你写了
width: 33.33%，加上padding: 10px、border: 1px和margin-right: 8px，实际占宽就可能超 35% —— 三列必然掉行 - HTML 源码中浮动元素之间有换行或空格，渲染器会插入约
4px间隙，这也会计入总宽 - 用开发者工具选中元素，直接看
Computed面板里的border-box width值，比写在样式里更真实 - 统一加
box-sizing: border-box到所有浮动项上，否则padding和border会额外撑宽
clear: both 加在哪才真正起作用？
clear: both 不是“清浮动”，而是“让当前块级元素避开上方浮动兄弟”。它只对文档流中紧挨着浮动元素之后的那个块级位置生效。
- 给浮动元素自己加
clear: left—— 完全无效，它只影响自身位置，不控制同行与否 - 把
clear: both写在<footer></footer>上，而中间隔着一个未清除的父容器 ——clear找不到参照物，等于没写 - 正确做法：要么用伪元素
.parent::after { content: ""; display: block; clear: both; }，要么直接给父容器设display: flow-root - 注意：
clear只对块级元素生效；inline或inline-block元素加了也无效
为什么父容器“看不见”子元素？
浮动元素脱离文档流，父容器高度塌陷为 0，看起来像“消失”，其实是子元素浮在了父容器视觉范围之外。
- 常见误操作：只加
float: left，不处理父容器 —— 后续元素会叠上来，布局全乱 -
overflow: hidden能触发 BFC 清除浮动，但可能意外裁掉溢出内容；display: flow-root更干净，兼容性到 Chrome 64+/Firefox 59+ - 如果父容器本身被
transform、filter或max-width缩小，实际可用宽度变小，也会导致浮动挤不下 - 别依赖
height: auto去“撑高”父容器 —— 浮动后它根本感知不到子元素存在
真正卡住一行的，往往不是 CSS 语法错误，而是盒模型计算偏差叠加父容器约束。现代项目优先用 display: flex 或 display: grid 替代 float；如果必须用，务必从 box-sizing: border-box 开始，再逐项核对 computed width。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
