flexbox+语义化+媒体查询可覆盖95%响应式表单场景；grid适合复杂分组但safari兼容弱；float易塌陷、inline-block有间隙，而flexbox天然支持flex-wrap和gap，无需依赖html结构或空白符。
直接用 Flexbox + 语义化 <form></form> 结构 + 媒体查询，就能覆盖 95% 的响应式表单场景；Grid 更适合复杂分组或仪表盘类表单，但对老版本 Safari 支持弱。
为什么不用 float 或 inline-block 布局表单
float 容易导致父容器塌陷，需要额外清浮，clear: both 在响应式断点切换时极易错位；inline-block 在小屏下因默认 baseline 对齐和空格字符，会意外产生几像素间隙，让并排输入框无法严丝合缝。Flexbox 天然支持 flex-wrap 和 gap，换行、对齐、间距全由 CSS 控制，不依赖 HTML 内容顺序或空白符。
移动端垂直堆叠 + 平板/桌面端两列的 Flexbox 实现
关键不是“怎么写两列”，而是“怎么让两列在窄屏下自动退化为单列”。核心是把所有 <div class="form-group"> 设为 <code>flex 容器子项，并用媒体查询控制其排列方向：
- 默认（手机）：
.form-group { flex: 0 0 100%; }，强制占满一行 - @media (min-width: 768px)：
.form-group { flex: 0 0 calc(50% - 8px); }，配合gap: 16px防止贴边 - label 必须设
display: block，否则在 flex 下可能被压扁或错位 - input/textarea 统一设
width: 100%，避免在 flex 容器中因默认min-width: auto撑开布局
表单验证错误信息出现后布局错乱怎么办
错误提示（如 <div class="error">）插入后高度突增，常导致相邻 <code><div class="form-group"> 被挤偏或换行异常。这不是 JS 逻辑问题，是 CSS 流式布局的固有行为：<ul>
<li>给 <code>.form-group 加 min-height（比如 min-height: 64px），预留错误提示空间
position: absolute + top: 100% 脱离文档流，但需确保父级 .form-group 有 position: relative
visibility: hidden 切换错误提示——它仍占位；改用 display: none 或 opacity: 0; height: 0; overflow: hidden
input 上直接加 margin-bottom 来撑开错误区，那会让正常态也多出空白table 布局表单？别碰
用 <table> 做表单结构看似能“对齐”，但实际代价极高：<ul><li>语义错误：<code><table> 表示二维数据关系，而表单是操作流，屏幕阅读器会误读为数据表<li>响应式硬伤：<code>colspan 在小屏下无法自动折叠，必须手动写 media query 覆盖所有跨列逻辑
align-items: flex-start 和 gap，对齐精度远超 table，且无渲染兼容性问题真正难的不是写出来，而是当表单字段超过 12 个、嵌套了动态增删组、还要兼容 IE11 时，你得清楚哪部分该用 JS 控制 DOM 结构，哪部分必须靠纯 CSS 弹性兜底——这时候再回头翻 flex-wrap 的 wrap-reverse 行为和 order 属性的优先级，就不是“会不会”的问题了。
