用flex+@media切换方向比float更可控，因float脱离文档流致塌陷、错位、换行不可控，且与现代框架及flex混用时行为异常；flex则天然包裹、响应式强、语义清晰。
直接结论：用 flex + @media 切换方向，配合语义化容器，比 float/grid 更可控、更少隐性错位。
为什么不用 float 做左右交替排版
float 在缩放或小屏下会“悬停”在右侧空白区，不是自然回落到左侧；它脱离文档流，导致父容器高度塌陷、后续内容上移；margin/padding 稍一调整就意外换行；现代框架（如 Bootstrap 5+、Tailwind）已完全弃用 float 布局类。
常见错误现象：float: right 在窄视口下图片仍卡在右上角，文字堆在下方左侧，形成“L 形错位”。
- 浮动元素无法响应
gap或justify-content的逻辑变化 - 与
flex混用时行为不可预测，调试成本高 - 左右交替（如奇数段左图右文、偶数段右图左文）必须写两套浮动规则，维护困难
用 flex 实现左右交替的最小可行结构
核心是让每个图文单元自包含，并通过 flex-direction 控制单次排列方向。不依赖全局 row-reverse，避免影响子元素内文本流或表单控件。
HTML 示例（语义清晰、无障碍友好）：
<article class="media-block"><div class="media-content">
<p>这是第一段说明文字……</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx"><img
src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="overflowclass">html-to-pptx</a>
<p class="overflowclass">将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</div>
<figure class="media-figure">
@@##@@
</figure></article><p><article class="media-block media-block--reverse"><figure class="media-figure">
@@##@@
</figure><div class="media-content">
<p>这是第二段说明文字……</p>
</div>
</article></p>
-
media-block默认flex-direction: row（左文右图） -
media-block--reverse单独加flex-direction: row-reverse（右文左图） - 所有
img必须设max-width: 100%和height: auto，否则小屏下溢出
@media 断点切换为垂直堆叠时的关键细节
只改 flex-direction 不够——必须同时重置宽度、对齐和间距，否则小屏下图文挤成窄条或错位。
CSS 示例（断点设在 768px）：
@media (max-width: 768px) {
.media-block,
.media-block--reverse {
flex-direction: column;
}
.media-content,
.media-figure {
width: 100%;
}
.media-figure img {
display: block;
margin: 0 auto; /* 图片居中，非默认左对齐 */
}
}
- 不写
width: 100%→ 小屏下图文可能保留宽屏时的 50% 宽度，造成空白或文字过窄 - 不加
margin: 0 auto→img默认display: inline，会继承基线对齐，左侧留空 - 别用
text-align: center控制图片——它对block元素无效，只对行内内容起作用
容易被忽略的 HTML 源码空白问题
两个 <div> 标签之间换行或缩进，会被浏览器解析为一个空格字符，在 <code>flex 容器中表现为约 4px 不可消除的间隙。
解决方法只有两种，选其一即可：
- 把 HTML 写成一行：
<div class="media-content">...</div> <figure class="media-figure">...</figure> - 或在 CSS 中设
.media-block { font-size: 0; }，再给子元素单独设font-size: 1rem
这个间隙在宽屏下不明显，但一旦加上 gap: 16px，就会变成双倍间距，且无法用 margin 负值可靠抵消。
