为何设置display:block的page-button-container未换行，反而被覆盖？

这是典型的浮动元素与块级元素的布局冲突问题，我来帮你拆解原因和修复方法：

为什么会出现这个情况？ #

你给.page-buttons-container加了float:right后，它会脱离正常的文档流，但后面的.test-pics-container是块级元素，默认会占据父容器的整行宽度。再算个关键的宽度账：

• 父容器.test-lookup-container的内容宽度是 1000px - 26px*2（左右padding）= 948px
• 你的.test-pics-container宽度是900px，几乎占满了父容器的可用宽度，根本没空间容纳400px的浮动按钮在同一行，所以按钮只能被挤到test-pics-container的下方。

再加上浮动元素脱离流后，块级元素不会主动给它预留位置，这就导致了按钮出现在test-pics-container下方的奇怪布局。

修复方案（根据你的需求选一种） #

方案1：调整宽度，让两者能在同一行容纳

如果希望按钮和图片容器在同一行展示，就需要确保两者的宽度之和不超过父容器的内容宽度（948px）。比如修改.test-pics-container的宽度：

.test-pics-container { 
  position: relative; 
  display: block; 
  width: 500px; /* 把900px改成500px，500+400=900 < 948 */
  height: auto; 
  margin: 0 auto 0 auto; 
  padding: 0 26px; 
  box-sizing: border-box; 
  background-color: red; 
}

这样按钮会右浮在图片容器的右侧，两者能在同一行正常展示。

方案2：保持图片容器宽度，让按钮在其上方右侧

如果希望图片容器占据整行，同时按钮在它上方的右侧，就需要给图片容器添加清除浮动的属性，让它在浮动元素下方重新开始布局：

.test-pics-container { 
  position: relative; 
  display: block; 
  width: 900px; 
  height: auto; 
  margin: 0 auto 0 auto; 
  padding: 0 26px; 
  box-sizing: border-box; 
  background-color: red; 
  clear: both; /* 新增清除浮动属性 */
}

这样.page-buttons-container会右浮在父容器的右上角，.test-pics-container在它下方占据整行，完美实现你想要的「按钮右浮+换行」需求。

方案3：用Flex布局替代浮动（更现代稳定）

浮动是旧的布局方案，现在更推荐用Flex来实现，能彻底避免浮动带来的流脱离问题。修改父容器的样式：

.test-lookup-container { 
  position: relative; 
  display: flex; /* 改成flex布局 */
  flex-direction: column; /* 垂直排列子元素 */
  width: 1000px; 
  height: auto; 
  margin: 0 auto 0 auto; 
  padding: 20px 26px; 
  box-sizing: border-box; 
  background-color: purple; 
  align-items: flex-end; /* 子元素靠右对齐 */
}
/* 移除.page-buttons-container的float:right */
.page-buttons-container { 
  position: relative; 
  display: block; 
  width: 400px; 
  height: 70px; 
  margin: 0 0 10px 0; /* 可选：加个margin-bottom和图片容器隔开 */
  padding: 0; 
  background-color: orange; 
}

这种方式不需要依赖浮动，布局更稳定，还能轻松控制元素的对齐和间距。

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