浮动元素边框不显示是因父容器高度塌陷未包裹浮动子元素；box-sizing仅影响自身宽高计算，无法解决塌陷；有效方案为触发BFC、清除浮动或改用Flex/Grid布局。
浮动元素边框不显示的典型现象
给 float: left 或 float: right 的元素设置了 border 却看不到，不是 CSS 写错了，而是父容器发生了高度塌陷——它没把浮动子元素“包住”，导致边框虽存在，但视觉上被裁切或压在父容器外沿下方。
为什么 box-sizing 不是根本解法
box-sizing: border-box 只影响元素自身宽高计算方式（是否包含 padding 和 border），对父容器是否包裹浮动子元素毫无作用。强行加它可能让元素尺寸变小，反而加剧错位，但不会让边框“出现”。
- 它解决的是
width + padding + border超出设定宽度的问题，不是布局塌陷问题 - 如果你发现加了
box-sizing后边框“好像出现了”，大概率是尺寸变化意外触发了重排，掩盖了真正原因
真正有效的三种修复方式
核心目标：让父容器重新获得正确高度，从而容纳浮动子元素及其边框。
-
方案一：BFC 触发（推荐） —— 给父容器加
overflow: hidden、overflow: auto或display: flow-root。其中display: flow-root最干净，无副作用，现代浏览器支持良好 -
方案二：清除浮动 —— 在浮动元素末尾加一个空元素并设
clear: both，或用伪元素：.container::after { content: ""; display: table; clear: both; } -
方案三：改用 Flex/Grid —— 如果父容器只需横向排列子项，直接用
display: flex替代浮动，天然不塌陷，且更可控
容易被忽略的细节
即使加了 overflow: hidden，边框仍不可见？检查以下几点：
立即学习“前端免费学习笔记（深入）”；
- 父容器是否有
height或max-height硬性限制，把内容截断了 - 浮动元素本身是否设置了
visibility: hidden或opacity: 0 - 是否存在其他 CSS 规则（如
transform、clip-path）无意中裁剪了边框区域 - 开发者工具里确认边框确实渲染出来了（看 computed 样式和 layout 面板），避免误判为“不显示”
