浮动对齐表单时input换行，因label未设宽、box-sizing非border-box、父容器未清浮；应设label和input同浮动、label定宽、input用calc(100%-label宽)，现代项目优先用flex或grid。
label 和 input 浮动对齐时，为什么 input 总是换行？
因为 label 和 input 默认都是 inline 元素，但浮动后脱离文档流，若父容器没清除浮动或没设宽，input 容易被“挤”到下一行。更常见的是：没给 label 设固定宽度，或忘了设置 box-sizing: border-box，导致 padding/border 算进宽度后溢出。
-
label必须设display: block或直接用float: left（推荐后者，保持行内语义） -
label要明确指定width，比如width: 120px，否则浮动宽度由内容撑开，对齐不可控 -
input建议也float: left，而不是“不浮动跟随”，否则它会尝试在label后的 inline 位置找空间，极易换行 - 父容器记得加
overflow: hidden或伪元素清除浮动，不然高度塌陷，后续元素上移
float 对齐时 label 宽度怎么设才不踩坑？
定宽不是拍脑袋——要覆盖最长 label 文本 + 留白，同时兼顾中文换行和英文空格断行。用 em 或 ch 比 px 更健壮，但实际项目中 px 最可控。
- 中文场景下，按「最多字数 × 单字平均宽度」估算，比如最多 6 个汉字，用
width: 80px（含左右 padding）通常够用 - 避免用
min-width替代width：浮动元素只靠min-width无法保证对齐基准一致 - 如果 label 内有
required星号（*），确保它包含在 width 计算内，或用padding-right预留空间 - 字体变化（如从
system-ui切到Microsoft YaHei）会影响实际宽度，上线前要在目标环境测一遍
input 不设 width 会怎样？
不设宽的 input 在浮动后，宽度默认为内容宽度（比如输入框里写“abc”，就只占那么点），视觉上严重错位。更糟的是，不同浏览器对未设宽浮动 input 的渲染逻辑略有差异，Chrome 可能勉强撑开，Firefox 直接缩成最小可点击区域。
- 必须显式设
width，推荐用calc(100% - 120px)（假设label宽 120px），而非固定像素值，适配性更好 - 设
width前确认box-sizing是border-box，否则padding和border会让实际宽度超出计算值 - 如果表单要响应式，在媒体查询里重置
input的width，别指望它自动适应
现代项目还该用 float 对齐表单吗？
不该。float 本质是为图文环绕设计的，硬掰来布局表单，清除浮动、行高对齐、zoom 缩放 bug、打印样式错乱……全是历史包袱。但如果你维护老系统、兼容 IE8、或 CSS-in-JS 限制了 Flex 使用，那 float 还得用，只是得更小心。
- Flex 布局一行解决：
display: flex; align-items: center，label设flex: 0 0 120px，input设flex: 1 - Grid 更干脆：
display: grid; grid-template-columns: 120px 1fr，连对齐都省了 - 如果非用 float，请把整套规则抽成 class，比如
.form-row+.form-label+.form-input，别在每个地方重复写float和width
浮动对齐真正的复杂点不在写法，而在它要求你时刻想“这个父容器清浮了吗”“这个 input 的 box-sizing 一致吗”“这段文本超长会不会撑破 label”。一不留神，改一处，三处错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
