float导致父容器高度塌陷是因浮动元素脱离文档流，解决需触发BFC或清除浮动；限制行数需放弃纯float，改用inline-block、flex或固定高度+overflow隐藏。
float导致父容器高度塌陷，列表项不显示
用 float 让 li 水平排列后，常见现象是整个 ul 高度变成 0，列表“消失”或错位。这不是 bug，是 float 的天然行为：浮动元素脱离文档流，父容器无法感知其尺寸。
解决方法不是加 height（破坏响应性），而是触发 BFC 或清除浮动：
- 给
ul加overflow: hidden或overflow: auto（兼容性好，IE6+） - 在
ul末尾加一个带clear: both的空div（语义差，少用） - 用伪元素清除：
ul::after { content: ""; display: table; clear: both; }（推荐，干净）
限制最多显示 N 行，超出截断并加省略号
仅靠 float 无法控制行数，必须结合容器高度 + overflow + line-clamp（但 line-clamp 对浮动布局无效）。真实可行的路径是：放弃纯 float，改用 display: inline-block 或现代方案；若坚持 float，则用 JS 计算行高 + 截断 DOM，或 CSS 配合固定高度 + overflow: hidden 粗粒度控制。
例如限制最多 2 行、每行高 1.5em：
立即学习“前端免费学习笔记（深入）”；
ul {
height: 3em; /* 2 × 1.5em */
overflow: hidden;
}
li {
float: left;
margin-right: 8px;
}⚠️ 注意：该方式会硬裁剪，末尾文字可能被切掉一半，且无法加“…”省略号。
float 与 flex/inline-block 在多行列表中的实际差异
当列表项宽度不确定、需自动换行时，float 的行为和 display: inline-block 或 flex-wrap: wrap 完全不同：
-
float：换行后新行从容器最左开始，不受上一行末尾影响；但最后一行可能因剩余空间不足而“挤不进”一个完整项，造成空白断裂 -
inline-block：有默认间隙（空格符渲染），需设font-size: 0或注释掉 HTML 空格；换行逻辑更接近文本流 -
flex：支持justify-content和align-content精确控制对齐，但 IE10+ 才可靠支持flex-wrap
如果目标是“等宽卡片横向铺满、自动折行”，float 已不是首选；display: grid 或 flex 更可控，尤其涉及响应式断点时。
IE8–IE9 下 float 列表的兼容性雷区
老版本 IE 对 float 的盒模型计算极敏感，常见问题包括：
- 子元素设了
width: 100%后仍换行（因父容器有 padding/border，IE 盒模型未启用box-sizing: border-box） -
li内含img时，图片下方默认留白（vertical-align: bottom可解） - 浮动项之间出现 1px 间隙（由字体渲染或 line-height 引起，设
font-size: 0于父容器可缓解）
若必须支持 IE8，建议统一用 display: inline-block + *display: inline; *zoom: 1 触发 hasLayout，比纯 float 更稳定。
float 布局本身没死，但它对“限制行数”“精确截断”“响应式重排”这些需求缺乏原生支持，容易陷入补丁套补丁的境地。真正卡住的往往不是写法，而是对“行数”这个视觉概念，CSS 本就没有提供基于 float 的声明式控制能力。
