浮动导致父容器高度塌陷，边框无法显示；应通过BFC（overflow:hidden）、伪元素.clearfix或flex布局清除浮动，而非在子元素加clear:both。

浮动元素导致父容器边框不显示或颜色错乱

父容器加了 border 却看不见，或者只显示上/左边缘，本质是父容器高度塌陷——它没把浮动子元素“包住”，边框自然画在了 0 高度区域上。这不是颜色设置错了，是布局根本没生效。

常见于用 float: left 做多栏布局后，给外层 .wrapper 加 border: 1px solid #333，结果什么都没出来。

• 检查 computed style：父容器的 height 真实值是不是 0px
• 浮动子元素未脱离文档流，父容器无法自动计算高度
• border-color 设置再准也没用，因为 border 没地方画

清除浮动的三种可靠方式（按推荐顺序）

别再用空

，冗余且语义差。现代项目优先选以下方案：

• 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 只控制该元素自身**与前面浮动元素的垂直间距**，不影响父容器高度计算。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 错误写法：
  ，第二个 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 写得够不够深。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！