按钮位置异常是因浮动元素脱离文档流导致，需在浮动父容器上添加clearfix类（含::after伪元素清除）或设置overflow:hidden/display:flow-root触发BFC来修复。
按钮被浮动元素“吸”到旁边，怎么拉回正常位置
这是典型的浮动脱离文档流导致的布局错位：当按钮前面有 float: left 或 float: right 的元素（比如导航栏、侧边栏、图片容器），按钮作为后续块级元素，默认会尝试“填补空隙”，结果卡在浮动块右侧或下方偏移处，而不是独占一行从顶部开始渲染。
- 检查按钮前最近的父容器是否包含浮动子元素——尤其是那些没加清除机制的
.nav、.sidebar、.gallery - 临时给按钮加
clear: both，看是否立刻回到下一行顶部；如果生效，说明问题根源就是浮动未清除 - 不要只给按钮加
clear，这只能治标；真正要修的是浮动容器的包裹能力
用 ::after 伪元素清除浮动（推荐方案）
比加空 给浮动父容器设 即使清除了浮动，如果浮动块总宽度 + 间距 > 父容器宽度，它们就会自动换行，导致按钮“卡”在第二行浮动块的右侧，看起来像位置错乱。 立即学习“前端免费学习笔记（深入）”； 浮动本身不是 bug，但混用不清除、不控制宽度、不考虑 BFC，就会让按钮“失踪”得毫无征兆。真正要盯住的，从来不是按钮自己，而是它头顶那个没撑开的父容器。.clearfix::after {
content: "";
display: table;
clear: both;
}
clearfix 类加到**浮动元素的直接父容器**上，例如：display: table（或 display: block），仅 clear: both 不起作用.clearfix { zoom: 1; } 触发 hasLayout，但 2025 年多数项目已可忽略
overflow: hidden 能快速修复但有隐藏风险
overflow: hidden 或 overflow: auto，本质是触发 BFC（块格式化上下文），强制它包含浮动子元素。简单粗暴，见效快。
.form-group { overflow: hidden; }
display: flow-root（Chrome 64+/Firefox 61+ 支持），它专为创建 BFC 设计，无溢出副作用按钮位置还异常？检查浮动元素宽度和 margin 是否溢出
width、margin、padding 总和是否超 100%box-sizing: content-box 下，width: 50%; padding: 10px; 实际占宽 > 50%* { box-sizing: border-box; } 可大幅减少这类计算错误
