使用float属性为何导致按钮偏移？视觉小说开发布局问题

问题根源在于浮动元素使父容器（section）高度塌陷，干扰了按钮margin: 0 auto的居中计算逻辑，最终引发偏移。因为float元素脱离正常文档流，未处理浮动的容器无法包裹住这些元素，高度会被计算为0，进而影响后续元素的布局定位。

修复方案（无需改用flex布局） #

只需给包含浮动元素的section添加清除浮动的处理，以下是两种简单可行的方式：

方式1：用overflow触发BFC #

修改section的CSS样式，添加overflow: auto触发块级格式化上下文（BFC），让容器自动包裹内部浮动元素：

section {
  display: none;
  text-align: center;
  overflow: auto; /* 新增：触发BFC，消除浮动导致的高度塌陷 */
}

方式2：添加clearfix伪元素 #

如果不想使用overflow，可以通过伪元素专门清除浮动，兼容性更好：

section::after {
  content: "";
  display: table;
  clear: both;
}

两种方式都能让包含浮动图片的section保持正确高度，按钮的margin: 0 auto就能稳定生效，不会再出现偏移问题。

内容的提问来源于stack exchange，提问作者WSDVX