LI元素用float:left仅使块级容器并排，不控制内部文本换行；需额外设置white-space:nowrap才能实现文字横向不折行。
LI 元素用 float: left 后文本不横向排列？先看渲染本质
直接给 <li> 设 float: left 并不会让「文本内容」横向排列，它只是让整个 <li> 块级元素脱离文档流、左浮动——结果是多个 <li> 并排，但每个内部的文本仍按默认块级行为换行显示。真正想实现“文字横向铺开”，通常是要做水平导航菜单或标签栏，关键不是 float 本身，而是控制容器、列表项和内联内容三者的盒模型关系。
float: left 在 ul > li 中的实际作用与常见错误
给 <li> 加 float: left 是老式水平菜单写法，但它有明确副作用和限制：
-
ul父容器会塌高（因为子元素浮动后不参与高度计算），常需额外加overflow: hidden或伪元素清除浮动 - 浮动项默认宽度由内容撑开，若
<li>内含长文本，又没设white-space: nowrap，文字仍会折行 - 在 Flexbox / Grid 普及后，
float已不推荐用于布局目的；MDN 明确标注其用途应限于图文环绕等传统场景 - IE6–8 对
float的 margin 合并、3px bug 等问题至今仍有遗留项目踩坑
更可靠的做法：用 display: inline-block 或 flex
如果目标是让多个 <li> 并排且内部文本不折行，优先选现代方案：
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul li {
display: inline-block;
white-space: nowrap;
vertical-align: top;
}
或更简洁的 Flex 方案（推荐）：
ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
ul li {
white-space: nowrap;
}
注意：display: inline-block 会在 HTML 换行处产生空格间隙，需删空格、设 font-size: 0 或用注释消除；而 flex 天然无此问题，且支持 justify-content 等对齐控制。
必须用 float 时的关键补救措施
若因兼容旧系统或特定 CSS 架构必须保留 float: left，以下三点缺一不可：
- 给
ul加清除浮动，例如：ul::after { content: ""; display: table; clear: both; } - 给每个
<li>显式设置white-space: nowrap，否则中文/英文长词仍会折行 - 避免依赖
li默认宽度，建议加min-width或width防止压缩变形 - 检查父容器是否有
word-break: break-word或overflow-wrap类样式级联进来，它们会覆盖nowrap
横向排列的难点从来不在 float 本身，而在于你是否意识到：float 控制的是块框位置，不是内联内容流向；真正决定文本是否折行的，是 white-space 和父容器的宽度约束。
