如何让两个.box容器上下分隔？当前二者并排显示

首先你的HTML代码存在标签未闭合的错误，这会导致DOM结构混乱，先修复代码结构：

<div class="box">
    <!-- POST ICON AND DATE -->
    <div class="left">
        <p>Blank text</p>
    </div>
    <!-- POST TEXT -->
    <div class="right">
        <p><b>Blank text</b><br>
        hbugyuoygouyguyguyg</p>
    </div>    
</div> <!-- 闭合第一个.box -->
<!-- post start -->
<div class="box">
    <div class="left">
        <p>Blank text</p>
    </div>
    <!-- POST TEXT -->
    <div class="right">
        <p><b>Blank text</b><br>
        jhbjhbjv</p>
    </div>
</div> <!-- 闭合第二个.box -->

修复结构后如果容器仍并排，大概率是你给.box设置了浮动（比如float: left）或者display: inline-block属性，可通过以下方法解决：

• 方法1：给.box添加清除浮动属性，强制容器换行：

.box {
    clear: both;
    /* 保留你的其他原有样式 */
}

• 方法2：重置.box为块级显示模式（div默认是block，若被修改则重置）：

.box {
    display: block;
    /* 保留你的其他原有样式 */
}

• 方法3：用伪元素清除容器内部浮动（若.box内部有浮动元素导致布局异常）：

.box::after {
    content: "";
    display: table;
    clear: both;
}

内容的提问来源于stack exchange，提问作者Book number one