浮动的 li 会导致父容器高度塌陷，因其脱离文档流使父容器无法计算高度；清除方式首选触发 BFC（overflow: hidden/auto）、其次伪元素 clearfix、最后 display: flow-root。

为什么浮动的 li 会让父容器高度塌陷

因为浮动元素脱离了普通文档流，父容器在计算高度时“看不见”它们，导致 height: auto 的容器实际高度为 0。这不是 bug，是 CSS 浮动的固有行为——它本就设计用于文字环绕图片这类场景，不是为布局而生。

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

别再用空 ，既污染 HTML 又难维护。

• 推荐：触发 BFC（最干净） —— 给父容器加 overflow: hidden 或 overflow: auto。注意：若子元素真有溢出（比如下拉菜单），hidden 会裁剪，此时改用 auto 更安全。
• 语义清晰：伪元素清除（兼容性好） —— 在父容器上加类，例如 .clearfix，并定义：

  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }

  必须带 display: table（或 block），否则 clear 不生效。
• 现代方案：用 display: flow-root —— 直接设父容器 display: flow-root，它会创建新的 BFC 且不带 overflow 的副作用。但 IE

  

  完全不支持，需确认目标环境。

float 和 display: inline-block 混用会加剧塌陷

如果列表项同时用了 float: left 和 display: inline-block，浏览器可能因渲染顺序混乱进一步丢失高度计算依据。只选一种定位方式：

• 纯浮动布局 → 确保父容器清除浮动
• 想保留行内特性 → 改用 display: inline-block + vertical-align: top，并清除父容器内文本节点产生的基线间隙（可设 font-size: 0 或 white-space: nowrap）

检查是否被其他 CSS 干扰了清除效果

即使写了 ::after 清除，也可能失效。常见干扰点：

• 父容器设置了 height 或 max-height 固定值，覆盖了自动撑高逻辑
• ::after 元素被 visibility: hidden 或 opacity: 0 隐藏，但 clear 仍有效；真正失效是它没被渲染出来（比如 display: none）
• 父容器本身也浮动了（float: left），那它自己也脱离文档流，上级容器照样塌陷——清除浮动必须作用在“直接包裹浮动子元素”的那个容器上

浮动布局现在虽少用，但老项目里很常见。关键是找准哪个容器该清除、用哪种方式清除，而不是堆砌多个 clear 规则。BFC 方案最省心，但得留意溢出和兼容性取舍。