网页footer与换行元素显示在图片上方的布局问题求助

我的网页中footer元素和换行元素跑到了图片上方，检查CSS代码没发现导致上移的设置，也没找到类似问题案例。以下是我的HTML和CSS代码：

HTML代码 #

<main >
        <hr class="top-line" />
        <!--this is the middle section of the webpage.
           all thee food and prices goes here-->
        <h2>candy flavores</h2>
        <p class="established">Est. 2022</p>
        <br />
        <section>
          <h2>shrooms</h2>
        <div class="image">
          <article>
            <a href="cherry.html">
              <img src="./img-mushroom/cherry.jpg" width: 20%;
               />
            </a>
            <p class="flavor">cherry mushroom</p>
            <p class="price">3.00</p>
          </article> 
           <article>
            <a href="sour-apple.html">
              <img src="./img-mushroom/sour-apple.jpg"
             /></a>
            <p class="flavor">sour apple mushroom</p>
            <p class="price">3.75</p>
          </article>
           <article>
            <a href="strawberry-lemon.html">
              <img src="./img-mushroom/strawberry-lemon.jpeg"
              /></a>
            <p class="flavor">strawberry lemon mushroom</p>
            <p class="price">3.50</p>
          </article>
         <article>
            <a href="grape.html"> <img src="./img-mushroom/grape.png"
              /></a>
            <p class="flavor">grape mushroom</p>
            <p class="price">4.00</p>
          </article>

          <article>
            <a href="blueberry.html">
              <img src="./img-mushroom/blueberry.png"
              /></a>
            <p class="flavor">blueberry mushroom</p>
            <p class="price">4.50</p>
          </article>

          <article>
            <a href="strawberry-pineapple.html">
              <img src="./img-mushroom/strawberry-pineapple.png"
              
              /></a>
            <p class="flavor">starberry pineapple mushroom</p>
            <p class="price">1.50</p>
            </article>

          <article>
            <a href="orange-mango.html">
              <img src="./img-mushroom/orange-mango.jpg"
              /></a>
            <p class="flavor">orange mango mushroom</p>
            <p class="price">2.75</p>
          </article></div>
        </section>
      
        </main>
        <hr/>
       <div id="footer"><!--footer color should be blue violit 
          and needs all social media links in it as well.-->
      <footer>
        <p class="address">123 candykingdom drive</p>
      </footer>
        </div>

CSS代码 #

.image, img{/*gotta fix the height. the 
  footer is above my images for some 
  reason. */
  display: block;
  margin-left: auto;
  margin-right: auto;
  
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 5px;
  
 
  width: 50px;
  height:50px;
  object-fit: fill;
   


}
footer {
  border: solid;
  font-size: 14px;
  width:100%;
  background-color: blueviolet;
  background-size: cover;
}

核心原因 #

你把容器.image和图片img的样式写在一起了，给.image设置了固定宽高（50px）和display: block，导致这个容器高度被强行压缩，里面的article元素都是块级元素，直接溢出容器范围。而容器后面的hr和footer会紧跟在高度只有50px的.image容器之后，看起来就像是footer跑到了图片的上方。另外第一个img标签里的width: 20%;是语法错误，HTML属性里不能写CSS样式。

修复步骤 #

1. 拆分容器与图片样式：把.image和img的CSS规则分开，容器不需要图片的边框、padding，也不需要固定宽高，它的作用是布局内部的article。
2. 修正HTML语法错误：移除第一个img标签里的width: 20%;，统一用CSS控制样式。
3. 给容器添加合理布局：比如用flex布局让article横向排列，自动换行。

修正后的CSS示例 #

/* 图片容器样式，负责布局内部元素 */
.image {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 元素间间距 */
  justify-content: center; /* 居中排列 */
  margin: 20px 0; /* 上下外边距，和其他元素分开 */
}

/* 图片专属样式 */
img {
  display: block;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 5px;
  width: 50px;
  height: 50px;
  object-fit: fill;
}

footer {
  border: solid;
  font-size: 14px;
  width: 100%;
  background-color: blueviolet;
  background-size: cover;
}

这样调整后，.image容器会根据内部内容自动撑开高度，后面的hr和footer就会正常显示在图片区域的下方，不会再出现上移的问题。

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