如何防止HTML按钮在点击后发生位置偏移

问题原因 #

你给按钮和生成的.e元素都设置了float: left，当点击按钮生成16个浮动div后，这些div会和按钮处于同一浮动布局流中。由于div占据了页面左侧的空间，按钮会被挤向右侧——单独设置margin无法改变浮动流的布局逻辑，所以没有效果。

解决方案1：让按钮脱离浮动流（最简单直接） #

把按钮放在独立的块级容器中，去掉按钮的浮动属性，确保它不受后续浮动元素的影响：

修改后的HTML：

<div class="button-wrap">
  <button type="button" id="start_button" onclick="start()">Start</button>
</div>

修改后的CSS：

.button-wrap {
  /* 块级容器确保按钮独占一行 */
  margin-bottom: 15px; /* 可选，和下方红色div拉开间距 */
}
#start_button {
  /* 移除原来的float: left */
}
.e {
  background-color: red;
  width: 5%;
  float: left;
  margin-top: 90px;
  margin-left: 40px; /* 把JS里的内联margin移到CSS，更易维护 */
}

修改后的JS：

var start = function() {
  for (var i = 0; i < 16; i++) {
    var x = document.createElement('div');
    x.setAttribute('class', 'e');
    var p = document.createElement('p');
    p.innerHTML = "hello";
    x.appendChild(p);
    document.body.append(x);
  }
};

解决方案2：改用Flexbox布局（更现代的方式） #

放弃浮动，用Flexbox来排列生成的div，彻底避免浮动带来的布局问题：

修改后的HTML：

<button type="button" id="start_button" onclick="start()">Start</button>
<!-- 新增容器放置生成的div -->
<div id="box-container"></div>

修改后的CSS：

#start_button {
  /* 不需要浮动，默认布局即可 */
}
#box-container {
  display: flex;
  flex-wrap: wrap; /* 超出宽度自动换行 */
  margin-top: 90px;
}
.e {
  background-color: red;
  width: 5%;
  margin-left: 40px;
}

修改后的JS：

var start = function() {
  var container = document.getElementById('box-container');
  for (var i = 0; i < 16; i++) {
    var x = document.createElement('div');
    x.setAttribute('class', 'e');
    var p = document.createElement('p');
    p.innerHTML = "hello";
    x.appendChild(p);
    container.append(x);
  }
};

核心逻辑说明 #

浮动布局的本质是让元素脱离标准文档流，多个浮动元素会依次排列在同一行（空间足够时）。之前的按钮和生成的div都在浮动流中，新元素会挤占按钮的位置。通过让按钮回到标准文档流（移除浮动、用容器包裹），或者改用更可控的Flex布局，就能彻底解决按钮偏移的问题。

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