如何实现两个盒子上下排列？附现有HTML代码及预期效果

你的蓝色盒子设置了float:right，这会让它脱离正常文档流，导致红色盒子被挤到它旁边。要实现上下排列，最简单的方法就是移除这个浮动属性：

修改后的代码（基础版） #

<style>
  .blue_box {
    border: 10px solid blue;
    padding: 0.5em;
    width: 150px;
    height: 100px;
    /* 移除float:right，让盒子回到正常文档流 */
  }
  .red_box {
    border:15px solid red;
    padding : 1.3em;
    width:min-content;
    height:min-content;
    margin:1em;
  }
    
</style>

<div class="blue_box">Hooray, a box!</div>
<div class="red_box"></div>

div是块级元素，默认会占据整行宽度，后续的块级元素会自动换行到下方，自然形成上下排列的效果。

如果需要更灵活的布局控制（比如让盒子居中对齐、快速调整间距等），可以用Flex布局实现：

修改后的代码（Flex布局版） #

<style>
  .box-container {
    display: flex;
    flex-direction: column;
    /* 可选：左对齐，换成center就是居中 */
    align-items: flex-start;
    /* 可选：设置盒子之间的间距 */
    gap: 1em;
  }
  .blue_box {
    border: 10px solid blue;
    padding: 0.5em;
    width: 150px;
    height: 100px;
  }
  .red_box {
    border:15px solid red;
    padding : 1.3em;
    width:min-content;
    height:min-content;
  }
    
</style>

<div class="box-container">
  <div class="blue_box">Hooray, a box!</div>
  <div class="red_box"></div>
</div>

通过外层容器的flex-direction: column属性，能强制子元素垂直排列，gap属性还能快速统一盒子间的间距，适合精细化布局场景。

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