浮动的 li 会导致父容器高度塌陷，因其脱离文档流使父容器无法计算高度；清除方式首选触发 BFC（overflow: hidden/auto）、其次伪元素 clearfix、最后 display: flow-root。
为什么浮动的 li 会让父容器高度塌陷
因为浮动元素脱离了普通文档流，父容器在计算高度时“看不见”它们，导致 height: auto 的容器实际高度为 0。这不是 bug，是 CSS 浮动的固有行为——它本就设计用于文字环绕图片这类场景，不是为布局而生。
清除浮动的三种可靠方式（按推荐顺序）
别再用空 <div style="clear:both"></div>，既污染 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 方案最省心，但得留意溢出和兼容性取舍。 
