如何不使用float实现div容器上下排列？原浮动布局改造

当前聊天消息因为.a类左浮动、.b类右浮动，导致不同类别的消息会并排显示，要改成上下依次排列，有两种简单的解决办法：

方法一：清除浮动（最直接的修改） #

给所有聊天消息元素添加clear: both属性，强制每个消息换行，不再和上一个浮动元素并排：

修改后的CSS代码：

.chat{
    min-height: 100px;
    max-height: 600px;
    height: 600px;
    overflow-y: scroll;
    position: relative;
}

.chat-message{
    background-color: #D3D3D3;
    max-width: 90%;
    margin: 20px 15px 0 15px;
    border-radius: 8px;
    clear: both; /* 新增清除浮动规则 */
}

.a{
    float: left;
    background-color: #79d2a1;
}

.b{
    float: right;
    background-color: #7eaacd;
}

方法二：改用Flex布局（更现代的方案） #

放弃浮动，用Flex布局实现消息左右对齐的同时，保证垂直方向上下排列：

修改后的CSS代码：

.chat{
    min-height: 100px;
    max-height: 600px;
    height: 600px;
    overflow-y: scroll;
    position: relative;
    display: flex; /* 启用Flex布局 */
    flex-direction: column; /* 设置垂直排列方向 */
}

.chat-message{
    background-color: #D3D3D3;
    max-width: 90%;
    margin: 20px 15px 0 15px;
    border-radius: 8px;
}

.a{
    background-color: #79d2a1;
    align-self: flex-start; /* 左对齐 */
}

.b{
    background-color: #7eaacd;
    align-self: flex-end; /* 右对齐 */
}

两种方法都能保留消息原有左右对齐样式，同时实现上下依次排列。方法二更推荐，因为Flex布局是现代CSS布局方案，能避免浮动带来的潜在兼容性和布局问题。

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