nth-child(odd/even)不能直接控制浮动方向，因float不改变文档流且左右浮动会抢位；需配合clear:both和父容器清除浮动才能稳定交替，现代推荐用CSS Grid实现。
nth-child(odd) 和 nth-child(even) 不能直接控制浮动方向
很多人试过写 img:nth-child(odd) { float: left; } 和 img:nth-child(even) { float: right; }，发现图片堆在顶部、换行错乱，甚至只显示第一张。这不是选择器写错了，而是浮动本身不改变文档流顺序，且左右浮动会互相“抢位”——右边的图一上来就往右顶，左边的图再往左顶，结果它们根本不在同一行对齐，更别说交替了。
真正起作用的是父容器的布局上下文和清除浮动策略，不是单纯靠 nth-child 给每个元素加 float 就能成。
用 float + clear 实现稳定交替（兼容老浏览器）
如果必须用浮动（比如要兼容 IE9），得让每一对图片形成独立的“行块”，靠 clear 强制换行。关键不是给每个 img 单独设 float，而是控制每行第一个元素清浮动：
-
img:nth-child(odd)设float: left;，并加clear: both;—— 这样它总从新行开始 -
img:nth-child(even)只设float: right;，不加clear，让它紧贴上一个odd元素的右侧 - 父容器需设
overflow: hidden;或用伪元素清除浮动，否则高度塌陷
示例结构：
<div class="gallery"><br> <img src="a.jpg"><br> <img src="b.jpg"><br> <img src="c.jpg"><br> <img src="d.jpg"><br></div>对应 CSS：
.gallery { overflow: hidden; }<br>.gallery img:nth-child(odd) { float: left; clear: both; }<br>.gallery img:nth-child(even) { float: right; }
立即学习“前端免费学习笔记（深入）”；
现代方案：用 grid 替代 float（推荐）
浮动本就不适合做规律性排列，grid 是更干净、可控的选择。用 grid-template-columns: 1fr 1fr; 配合 grid-auto-flow: dense;，再用 grid-column 控制奇偶项位置，就能天然实现左右交替，且响应式友好、无清除问题。
-
img:nth-child(odd)→grid-column: 1; -
img:nth-child(even)→grid-column: 2; - 父容器设
display: grid;和两列模板即可 - 注意：IE 不支持
grid，如需兼容请回退到 float 方案
简写示例：
.gallery { display: grid; grid-template-columns: 1fr 1fr; }<br>.gallery img:nth-child(odd) { grid-column: 1; }<br>.gallery img:nth-child(even) { grid-column: 2; }
图片宽高不一致时的常见崩坏点
无论用 float 还是 grid，只要图片原始尺寸差异大，左右两列就会高度不齐，视觉上“错格”。这不是代码写错了，是布局机制的自然表现。
- float 方案中，右侧图片若比左侧高，会把下一行的左侧图往下挤
- grid 方案中，
grid-row不自动拉伸，会导致列高由最高图决定，留白难看 - 解决思路不是硬调
height，而是统一裁剪：object-fit: cover;+ 固定容器高宽，或服务端生成等比缩略图 - 若必须保留原图比例，grid 更可控：可配合
align-items: start;避免底部对齐拉扯
最易被忽略的是：没给图片容器设 min-height 或 aspect-ratio，导致文字流跟随图片高度跳变——尤其在移动端，这个抖动比对不齐还影响体验。
