缩进由<ul>或<ol>的padding-left控制，而非<li>；浮动使<li>脱离文档流导致缩进失效，应保持父容器padding并改用flex或inline-block布局。
float: left 会让列表项失去默认缩进
浏览器对 <ul> 和 <ol> 的默认样式里，padding-left 是缩进的来源。一旦给 <li> 加了 float: left，它就脱离文档流，父容器的 padding 不再“包裹”它，视觉上缩进就消失了。
常见错误现象：<li> 左浮动后全部挤到最左边，序号或项目符号贴着左边界，和文字堆在一起。
- 别试图靠给
<li>加margin-left模拟缩进——浮动后外边距行为不稳定，尤其在多行换行时容易错位 - 真正该动的是父容器：
<ul>或<ol>保留padding-left，再让<li>浮动，但需清除浮动影响布局 - 如果用
display: inline-block替代float，缩进能保留，但要处理换行间隙（字体大小为 0 或注释掉换行符）
用 margin 实现“自动缩进”必须配合 display: inline-block
margin 本身不会“自动”缩进；所谓自动，其实是利用内联元素的排版特性。把 <li> 设为 display: inline-block，再统一设 margin-right，就能让它们水平排列且间距可控，同时不破坏父级的 padding-left 缩进。
使用场景：横向导航菜单、标签云、操作按钮组等需要水平排列又保留语义结构的列表。
立即学习“前端免费学习笔记（深入）”；
-
<ul>保持默认padding-left: 40px（各浏览器略有差异），这是真正的缩进来源 -
<li>设display: inline-block+vertical-align: top防止基线对齐错位 -
margin-right控制项间距，最后一项用:last-child { margin-right: 0; }避免多余空白 - 注意：若内容高度不一，
vertical-align不设会导致上下错位，不是 bug，是 inline-block 的正常行为
float + clearfix 是兼容老浏览器的稳妥方案
IE8 及更早版本不支持 display: inline-block（对非原生内联元素），这时只能回到 float，但必须解决父容器塌陷问题，否则后续内容会上移。
性能 / 兼容性影响：clearfix 本身无性能负担，但浮动布局在响应式断点处容易失控，需额外媒体查询重置 float 和 width。
- 给
<ul>加类如clearfix，并用::after伪元素触发 BFC：content: ""; display: table; clear: both; -
<li>设float: left后，必须显式设width或max-width，否则在窄屏下可能溢出或折行异常 - 避免用
overflow: hidden清浮动——会裁剪position: absolute子元素或阴影
现代写法推荐 flex 而非 float 或 inline-block
如果你不需要支持 IE9 以下，display: flex 在 <ul> 上直接生效，天然保持缩进（padding-left 依然有效），无需清除浮动、不用处理 inline-block 间隙，也不存在基线对齐问题。
参数差异：flex-direction: row 控制横向，gap 替代 margin 控制间距，flex-wrap 决定是否折行。
-
<ul>设display: flex+flex-wrap: wrap+gap: 8px -
<li>不用任何浮动或显示声明，保持默认display: list-item - 缩进依然来自
<ul>的padding-left，且 flex 容器会尊重它 - 注意：Firefox 对
gap在 flex 布局中的支持从 63+ 开始，旧版本需回退到margin
真正容易被忽略的是：缩进从来不是 <li> 的责任，而是 <ul> 或 <ol> 的 padding。所有“浮动后缩进消失”的问题，本质都是动错了对象。
