因float使label和input脱离文档流，失去共同行高基准与父容器约束，导致vertical-align失效、margin不累积、clear作用错位；根本解法是用flex布局替代float，或通过clearfix让直接父容器包裹浮动子项。

为什么给 input 和 label 单独设 float:left 会错位

因为 float 脱离文档流后，label 和 input 不再共享同一行高基准，也不再受父容器高度约束。它们各自按自身 line-height、vertical-align（默认 baseline）和 box-sizing 计算位置，结果常是 label 高一点、input 低一点，或底部留白、换行错乱。

更麻烦的是：浮动元素之间 margin 不累积，margin-bottom 加在浮动的 .form-group 上大概率无效；而如果只给其中一个加 clear: both，另一个仍会“漂”在旁边——clear 不作用于自身，只影响后续兄弟元素。

• 别把 float: left 直接写在 label 或 input 上，语义错、可访问性差、响应式断点极易崩
• 浮动必须成组控制：用一个包裹容器（如
  ）统管对齐与清除
• 统一 box-sizing: border-box 全局生效，否则 width: 100% 的 input 会因 padding 溢出

用 clearfix 强制父容器包裹浮动子项

如果必须保留 float 布局（例如兼容 IE9），关键不是调 input 的 margin，而是让它的直接父容器「看见」它。错位根源永远在父容器高度塌陷，不是子元素没对齐。

给包裹 label 和 input 的容器（比如

）加 clearfix 类：
.form-group::after {
  content: "";
  display: table;
  clear: both;
}
• 必须作用于浮动子元素的**直接父容器**，加在 form 根元素上没用
• 不要用 overflow: hidden 替代——它会裁剪 select 下拉框、autocomplete 弹层等溢出内容
• 若该容器已设 position: absolute，伪元素 ::after 会失效，此时只能回退到插入空
vertical-align: middle 不生效？检查 display 类型和 line-height
vertical-align 只对 inline、inline-block、table-cell 和浮动元素有效，但它对齐的参考线不是容器中线，而是父行盒（line box）的 baseline。所以单设 vertical-align: middle 常没反应。

CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• 确保 label 和 input 同为 display: inline-block 或同为浮动（不能一个 float、一个 inline-block）
• 给 .form-group 设明确的 line-height（如 line-height: 36px），再配合 input 的 height 和 padding 精确控高
• 避免用 margin-top 手动“顶” input——这会让缩放、字体变化或 RTL 切换时立刻错位
现代项目请直接切到 flex，别修 float
浮动不是为表单设计的。哪怕你把 clearfix、vertical-align、box-sizing 全配齐，遇到 iOS 键盘弹出、Chrome 表单自动填充、或 Safari 的 focus outline 渲染异常，还是可能错位。
真正省心的做法：只改包裹每组表单项的容器，不碰全局结构：
.form-group {
  display: flex;
  align-items: center;
}
label {
  flex: 0 0 120px;
}
input, select, textarea {
  flex: 1;
  min-width: 0; /* 防止 flex 布局下 input 被压缩 */
}
• 不要在 form 根元素上设 display: flex——否则按钮、提示文字全被横排，破坏语义流
• min-width: 0 是关键，否则某些浏览器下 input 会无视 flex: 1 强撑宽度
• Safari 旧版本（flex-wrap 支持弱，表单项多时建议加 flex-wrap: wrap 防溢出