display: flow-root 是最简解法；它为表单行创建bfc，解决浮动塌陷，不裁剪阴影或弹层，且语义干净。
表单每行浮动塌陷时，display: flow-root 是最简解法
表单里用 float: left 实现左右对齐（比如标签左、输入框右），但父级 .form-row 高度为 0，导致上下行重叠或边框不包裹内容——这不是兼容性问题，是 BFC 缺失的典型表现。直接给每行容器加 display: flow-root，一行生效，不污染语义，也不裁剪 box-shadow 或下拉弹层。
clear: both 加在表单行末尾元素上才有效
很多人把 clear: both 写在浮动元素自己身上，或者塞进一个空 <div> 放错位置，结果没反应。关键点在于：<code>clear 只对「它前面紧邻的浮动兄弟」起作用，且自身必须是块级、已渲染、未被隐藏。
- ✅ 正确：加在
.form-row后面第一个块级元素上，比如<div class="form-row">...</div> <div style="clear: both"></div> - ❌ 错误：写在
<input style="float: right">上——float和clear共存时，clear被忽略 - ⚠️ 注意：如果目标元素是
<span></span>或其他 inline 元素，得先加display: block，否则clear不触发
老项目需兼容 IE11？用 .clearfix::after 但别漏关键声明
伪元素清除法仍有必要，但常见失效原因就三个：缺 content: ""、没设 display: block、父容器用了 display: flex —— 后者会让浮动本身失效，clear 就失去意义。
- 必须写全：
.clearfix::after { content: ""; display: block; clear: both; } - 别用
display: inline-block替代block，否则clear不生效 - 嵌套表单行（比如字段组里再套行）时，每一层浮动容器都要单独加
.clearfix，BFC 不穿透层级
响应式断点下浮动错位？大概率是小数像素宽度计算偏差
媒体查询里写 width: calc(50% - 10px) 这类表达式，浏览器四舍五入后可能让最后一项挤不下，看似“清不干净”，其实是换行了。这不是清除方法的问题，而是浮动布局固有缺陷。
- 临时修复：给最后一项加
margin-right: 0或用flex替代 - 根本解法：表单这类结构化内容，优先用
display: grid（如grid-template-columns: auto 1fr）或display: flex+justify-content: space-between - 注意：表格单元格（
<td>）内浮动也要清，但 <code>overflow: hidden在这里风险更高——可能裁掉position: absolute的日期选择器真正容易被忽略的是：浮动清除不是“加个样式就完事”，而是要判断「谁该包含谁」「谁该挡住谁」。比如表单里一个
.form-group包含多个浮动字段，清浮动的位置必须落在这个.form-group内部，而不是整个<form></form>外层。
