如何在HTML中堆叠div？交替左右布局实现及问题求助

问题出在这几点 #

1. 第一个区块的图片用了浮动，但没做清除处理，导致第二个区块被浮动元素“卡”住，没法自动换行到下方
2. CSS代码里#floated-img1 img的float: right后面写了反引号，不是分号，语法错误直接让右侧浮动失效
3. 每个区块都用唯一ID，后续加第三个、第四个区块还要重复写CSS，复用性太差

直接用这套代码就能解决 #

HTML（用class复用，结构更清爽）

<div class="content-block">
    <div class="img-box left">
        <img src="image" alt="左侧配图">
    </div>
    <p>Lorem...（替换成你的文本内容）</p>
</div>
<div class="content-block">
    <div class="img-box right">
        <img src="image" alt="右侧配图">
    </div>
    <p>Lorem...（替换成你的文本内容）</p>
</div>
<div class="content-block">
    <div class="img-box left">
        <img src="image" alt="左侧配图">
    </div>
    <p>Lorem...（替换成你的文本内容）</p>
</div>

CSS（统一样式，自动清除浮动）

/* 每个内容区块独立，自动清除内部浮动 */
.content-block {
    overflow: hidden;
    margin: 15px 0; /* 区块之间留间距，避免拥挤 */
}

/* 图片基础样式 */
.img-box img {
    display: block;
    width: 200px;
}

/* 左侧图片浮动 + 边距 */
.img-box.left img {
    float: left;
    margin-right: 10px;
    margin-left: -16px;
}

/* 右侧图片浮动 + 边距（修复语法错误） */
.img-box.right img {
    float: right;
    margin-left: 10px;
    margin-right: -16px;
}

/* 文本样式，自动填充剩余空间 */
.content-block p {
    margin-top: 0;
    overflow: hidden; /* 避免文本绕到图片下方 */
}

关键说明 #

• overflow: hidden给.content-block加上后，每个区块会自动包裹内部浮动元素，下一个区块不会被上一个的浮动影响，自然排在下方
• 用class替代id，后续新增交替区块直接复制结构即可，不用重复编写CSS
• 修正了CSS语法错误，确保右侧浮动样式生效
• 文本添加overflow: hidden，能让文本自动占满图片之外的空间，避免出现文本跑到图片下方的混乱布局

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