如何在HTML页面中实现一张图片显示在另一张图片的下方？

你的.img1样式设置了float: left浮动属性，浮动元素会脱离常规文档流，导致包裹它的第一个父div无法识别浮动元素的高度，父div高度只会统计内部普通文本、p标签等非浮动元素的高度。如果你的文本高度小于第一张图片高度，后续第二个div就会排列到浮动图片的剩余空白区域，所以你添加少量<br>也无法把第二张图片推到最底部。

推荐以下3种通用的清除浮动方案，任选一种即可：

• 方案1：给包裹第一张图片的父div添加overflow: hidden样式，触发块级格式化上下文，让父div可以包裹住浮动元素的完整高度
• 方案2：在第一个div的结束标签前，添加空元素<div style="clear: both;"></div>，直接清除浮动带来的布局影响
• 方案3：给包裹第一张图片的父div添加clearfix伪类样式，无额外DOM元素，是行业通用的最优方案：

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

给父div加上class="clearfix"即可生效。

CSS代码 #

img{
    display: block;
}
/* 可选添加clearfix样式 */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.img1{
    float: left;
    margin: 15px;
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    width: auto;
    height: auto;
    max-height: 500px;
    max-width: 650px;
    border-radius: 30%;
}
#Ciri{
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    max-height: 425px;
    max-width: 500px;
    border: 3px solid #000000;
    border-radius: 150px;
}

HTML代码 #

<!-- 给父div添加clearfix类即可，其他代码不变 -->
<div class="clearfix">
    <img src="images/Paella.jpg" class="img1">
    <p>本次作业我选择使用了我自己烹饪的一道菜的照片——西班牙海鲜饭。这道菜出乎意料地简单，不需要很长烹饪时间，我对最终成品很满意。我把自己的这张图片上传到了imgur用于完成作业。</p>
    <br>
    我之前很难解决图片模糊的问题，因此参考了相关方案，成功保持了图片清晰度。
    </p>
</div>
<br>
<div>
    <a>
    <img id="Ciri" src="images/Ciri.jpg"></a>
</div>

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