浮动元素实际宽度=width+左右padding+左右border+左右margin；相邻浮动元素margin不合并，间隙常源于行高或字体基线；清除浮动不阻止margin塌陷，需用padding/border/overflow或display:flow-root打断传递链。
浮动元素的边界问题本质是盒模型尺寸计算与脱离文档流共同作用的结果，不控制好 width、padding、border 和 margin 的叠加关系，就会出现换行错位、间隙异常或父容器塌陷。
float 元素的实际宽度怎么算？
浏览器按盒模型总宽度（width + 左右 padding + 左右 border + 左右 margin）来排列浮动元素。只要这一总和超过父容器可用宽度，就会强制换行。
- 例如：
width: 30%; padding: 10px; border: 2px solid #000; margin-right: 15px;—— 实际占位远超 30% - 多个浮动元素间若只设
margin-right，最后一个元素的右侧空白仍会占用空间，可能挤垮布局 - 推荐统一用
box-sizing: border-box;，让width包含padding和border，避免隐性溢出
为什么 float 元素之间有“看不见的间隙”？
这不是浮动本身的问题，而是盒模型中 margin 的行为被误读：相邻浮动元素的 margin 不会合并（不同于标准流块级元素），但若没显式设 margin，它们会紧贴——此时间隙往往来自字体基线、行高或父容器默认 line-height 导致的行盒对齐偏移。
- 检查是否意外继承了父元素的
font-size或line-height - 给浮动容器设
font-size: 0;可消除行内级间隙（注意子元素需重置font-size） - 更稳妥的做法：用
vertical-align: top;或display: block;显式切断行内上下文
清除浮动后，margin 还会塌陷吗？
会。清除浮动（如 clear: both; 或 ::after 伪元素）只解决父容器高度塌陷，不改变 margin 塌陷规则。浮动元素的 margin-top 仍可能传递到父容器上边沿。
- 典型现象：第一个浮动子元素设了
margin-top: 20px;，父容器顶部却空出 20px - 解决方法不是加
clear，而是打断 margin 传递链：给父容器设padding-top: 1px;、border-top: 1px solid transparent;或overflow: hidden; - 注意：如果父容器已用
display: flow-root;创建 BFC，它同时解决高度塌陷和 margin 塌陷，比clearfix更干净
真正难处理的不是 float 本身，而是盒模型各部分在脱离流之后依然参与空间计算——margin 影响位置却不影响自身尺寸，padding 和 border 撑大内容区却常被忽略。动手前先用开发者工具的「Layout」面板勾选「Show box model」，一眼看清每个值落在哪一层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
