float元素border“消失”实为父容器高度塌陷导致，根本原因是浮动脱离文档流；应优先用display:flow-root清除浮动，其次伪元素方案，避免overflow:hidden误裁内容。
float 元素的 border 在父容器里“消失”了
不是真的消失，是父容器没包裹住浮动子元素，导致 border 看起来被截断或压在内容下面。根本原因是 float 脱离文档流，父容器高度塌陷，border 画在了 0 高度区域上。
常见现象：div 设了 border: 1px solid #ccc，里面放两个 float: left 的子块，结果 border 只显示顶部一小段，或者完全看不见下边框。
- 别用
overflow: hidden硬清浮动——它虽能撑高父容器，但会意外裁剪position: absolute子元素或box-shadow - 优先用
display: flow-root，它是专为清除浮动设计的现代方案，不影响溢出行为，兼容性到 Chrome 64+/Firefox 58+（基本可放心用） - 如果必须兼容 IE，改用伪元素清浮动：
::after { content: ""; display: table; clear: both; }，加在父容器上
box-sizing: border-box 和 float 一起用时宽度算不准
box-sizing: border-box 本意是让 width 包含 padding 和 border，但和 float 混用时，若父容器没清浮动，实际渲染的 width 仍可能“溢出”——因为父容器高度塌陷后，后续元素会上移，视觉上像子元素变宽了。
关键点：盒模型计算本身没错，错在布局上下文丢失。真正影响宽度感知的是浮动导致的文档流断裂，不是 box-sizing 本身。
- 检查是否漏了清浮动，这是 90% 的“宽度异常”根源
- 避免给浮动元素设
width: 100%，尤其当父容器有 padding 时——border-box虽包含 border，但不包含 margin，而浮动元素的 margin 会脱离父容器边界 - 用
calc(50% - 10px)替代固定百分比 + padding 组合，更可控
IE8–IE11 下 float + border 的像素级错位
老 IE 对 float 的行内换行逻辑和边框渲染有微小偏差，常表现为相邻浮动块之间多出 1px 空隙，或 border 在右边缘轻微模糊/偏移。
这不是 bug，是它把 sub-pixel 计算四舍五入的方式和现代浏览器不同。比如两个 width: 50% 浮动块，在 100px 宽父容器里，IE 可能算成 49.5px + 49.5px = 99px，剩 1px 空白。
- 给浮动元素加
margin-right: -1px（仅 IE 条件注释或@supports not (display: flex)） - 用
font-size: 0压父容器，消除 inline 元素默认间隙（适用于子元素是inline-block或文本节点） - 放弃精确 50% 分割，改用
width: 49.9%+margin-right: 0.2%，留出容错空间
用 Flex 替代 float 后 border 位置突然“偏了”
Flex 容器默认 align-items: stretch，子项会拉伸填满交叉轴高度。如果你原来靠 float 实现等高并列，现在切 Flex，border 就可能从“贴着文字底部”变成“撑满整行高度”，看起来像下移了。
这不是 border 错了，是基准线变了——float 是基于内容基线定位，Flex 是基于容器轴线对齐。
- 加
align-items: flex-start让子项顶部对齐，还原 float 的视觉习惯 - 若需保留等高但控制 border 位置，用
min-height替代height，避免强制拉伸 - 注意
border在 Flex 里仍走盒模型，但margin在主轴方向可能被合并（如多个margin-right不叠加），这点和 float 不同
事情说清了就结束。浮动布局的 border 异常，99% 出在父容器没正确建立 BFC，而不是 border 本身写错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
