浮动导致父容器高度塌陷，边框无法显示；应通过BFC（overflow:hidden）、伪元素.clearfix或flex布局清除浮动，而非在子元素加clear:both。
浮动元素导致父容器边框不显示或颜色错乱
父容器加了 border 却看不见，或者只显示上/左边缘，本质是父容器高度塌陷——它没把浮动子元素“包住”，边框自然画在了 0 高度区域上。这不是颜色设置错了，是布局根本没生效。
常见于用 float: left 做多栏布局后，给外层 .wrapper 加 border: 1px solid #333，结果什么都没出来。
- 检查 computed style：父容器的
height真实值是不是0px - 浮动子元素未脱离文档流，父容器无法自动计算高度
-
border-color设置再准也没用，因为 border 没地方画
清除浮动的三种可靠方式（按推荐顺序）
别再用空 <div style="clear:both"></div>，冗余且语义差。现代项目优先选以下方案：
-
BFC 触发法（最推荐）：给父容器加
overflow: hidden或overflow: auto。简单、无副作用、兼容到 IE8 -
::after 伪元素法（最通用）：写一个可复用的 class：
.clearfix::after { content: ""; display: table; clear: both; }然后在父容器上加class="clearfix"。注意必须带display: table（或block），仅clear: both不生效 -
flex 替代法（新项目首选）：直接把父容器设为
display: flex，子元素自动排列且父容器高度正常，float可以全删。但需确认不需要 IE9- 兼容
为什么 clear: both 加在子元素上不管用
很多人把 clear: both 写在最后一个浮动子元素上，期望它“把父容器撑开”——这是误解。clear 只控制该元素自身**与前面浮动元素的垂直间距**，不影响父容器高度计算。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
<div class="item" style="float:left"></div> <div style="clear:both"></div>，第二个 div 是块级但无内容，高度仍为 0 - 即使它有高度，也只是在最后一个浮动元素下方“空出一段”，父容器依然不知道它存在（除非它也参与高度计算，比如没浮动）
- 真正起作用的是让**父容器自己建立 BFC**，或用伪元素在父容器内部“补一行清除流”
Flex 布局下还用清除浮动？别自找麻烦
如果你已在父容器用了 display: flex，再加 clearfix 或 overflow 是多余操作，甚至可能干扰对齐行为（比如 overflow: hidden 会裁剪子元素溢出部分）。
- 确认浏览器支持：Can I Use 显示
flex在 Chrome 29+/Firefox 28+/Safari 6.1+ 已稳定 - 子元素的
float属性在 flex 容器中完全失效，应改用margin、justify-content或order - 如果旧代码里混着 float 和 flex，先统一移除所有
float，否则行为不可预测
边框颜色本身不会异常，异常的是你根本没看到它——问题永远在布局流是否闭合，而不是 border-color 写得够不够深。
