为什么两列布局插入图片后页脚异常？如何消除版权与页脚空白

问题描述 #

尝试在网页中实现两列布局，当在布局容器内插入图片时，页脚会出现显示错乱问题，移除图片后页脚显示即可恢复正常，另外需要消除版权区块与页脚之间的空白。

相关代码 #

无图片版本HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>

  <title>SuperRestraunt</title>
  <meta charset="utf-8">
  <link href="Style.css" rel="stylesheet">

</head>

<body>
  <a name="top"></a>
  <nav class="nav">
    <div class="menu">
      <a href="index.html">Home</a>
    </div>
    <div class="menu">
      <a href="shopnow.html">Full Menu</a>
    </div>
    <br/>
    <br/>
  </nav>
  <main class="wrapper">

    <div class="banner">
      <h1><span class="name">SuperRestraunt</span></h1>
      <h2>Serving the best food in Macon since 2015.</h2>
      <h2>Please take a look at our available coupons in the list below.</h2>
      <div class="bulletPoints">

        <ul>
          <li>Buy one burger, get one FREE</li>
          <li>30% off one dessert item</li>
        </ul>
      </div>
      <br/>

    </div>
    <div class="twocolumns">


      <p> Are you looking for the best southern cooking in all of middle Georgia? If so, you have looked in the right place!</p>

      <p> Our chefs have over 30 years in combined experience</p>








    </div>

    <h2><em>Contact us for a reservations</em></h2>
    <p>Please call at least 2 days ahead for all reservations that include 10 or more people.</p>


  </main>

  <footer class="footer">
    <div class="box">
      <p>SuperRestraunt</p>
      <p>(478) 302-1981</p>
      <p>manager@superrestraunt.com</p>
      <br/>
    </div>
    <div class="box">
      <p>Check out are Social Media for more coupons and pictures!</p>
      <p>Facebook:</p>
      <p>Instagram:</p>
      <p>Twitter:</p>
    </div>
    <div class="box">
      <p>Locations:</p>
      <br/>
      <p>543 Cherry St suite b, Macon, GA 31201</p>
    </div>
  </footer>

  <div class="copyright">
    <h2>@copyright: Landon Byrd</h2>
    <p>Fall 2021, All Rights Reserved</p>
  </div>

  <p>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
      <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" />
    </a>
  </p>

  <a href="#top">Back to top of page</a>
</body>

</html>

带图片版本HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>

  <title>SuperRestraunt</title>
  <meta charset="utf-8">
  <link href="Style.css" rel="stylesheet">

</head>

<body>
  <a name="top"></a>
  <nav class="nav">
    <div class="menu">
      <a href="index.html">Home</a>
    </div>
    <div class="menu">
      <a href="shopnow.html">Full Menu</a>
    </div>
    <br/>
    <br/>
  </nav>
  <main class="wrapper">

    <div class="banner">
      <h1><span class="name">SuperRestraunt</span></h1>
      <h2>Serving the best food in Macon since 2015.</h2>
      <h2>Please take a look at our available coupons in the list below.</h2>
      <div class="bulletPoints">

        <ul>
          <li>Buy one burger, get one FREE</li>
          <li>30% off one dessert item</li>
        </ul>
      </div>
      <br/>

    </div>
    <div class="twocolumns">
      <img class="img1" src="images/burger.jpg" alt="burger">

      <p> Are you looking for the best southern cooking in all of middle Georgia? If so, you have looked in the right place!</p>

      <p> Our chefs have over 30 years in combined experience</p>








    </div>

    <h2><em>Contact us for a reservations</em></h2>
    <p>Please call at least 2 days ahead for all reservations that include 10 or more people.</p>


  </main>

  <footer class="footer">
    <div class="box">
      <p>SuperRestraunt</p>
      <p>(478) 302-1981</p>
      <p>manager@superrestraunt.com</p>
      <br/>
    </div>
    <div class="box">
      <p>Check out are Social Media for more coupons and pictures!</p>
      <p>Facebook:</p>
      <p>Instagram:</p>
      <p>Twitter:</p>
    </div>
    <div class="box">
      <p>Locations:</p>
      <br/>
      <p>543 Cherry St suite b, Macon, GA 31201</p>
    </div>
  </footer>

  <div class="copyright">
    <h2>@copyright: Landon Byrd</h2>
    <p>Fall 2021, All Rights Reserved</p>
  </div>

  <p>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
      <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" />
    </a>
  </p>

  <a href="#top">Back to top of page</a>
</body>

</html>

CSS代码 #

/*

Landon Byrd
Fall 2021

    Light Blue  #06aed5
    Darker Blue #086788
    Cream White #f2f4f3
    Yellow      #f0c808
    Rich Red    #dd1c1a 
*/
/* Global Settings */
h1 {text-align: center}
h2 {text-align: center; color: #086788}
.wrapper{width:85%; margin:0 auto; max-width: 960px; }

/* Nav Section */
.nav{width: 85%; margin:0 auto; background-color: #06aed5; text-align: center;}
.menu{float:left; width:25%;}

/* Main Section */
.banner{justify-content: center;background-color: #06aed5; border-radius: 2pt; color: #f2f4f3;}
.bulletPoints{margin-left:35%;}


.name{font-weight: bold; color: #f0c808}

.twocolumns{}
.img1 {float:left; width: 400px; height: 175px; margin:15px}
   
/* Footer Section */
*{box-sizing: border-box;}
.footer{text-align: center; background-color: #06aed5; color: #086788; }
.box{float:left; width: 33.33%;}
.footer::after{content: ""; clear:both; display:table;}

/* copyright section */
.copyright {text-align: center; background-color: #06aed5; color: #086788; }

效果参考图 #

解决方案 #

问题原因 #

1. 插入图片后页脚错乱：图片设置了float: left浮动属性，父容器.twocolumns未做清除浮动处理，浮动元素脱离文档流后父容器高度塌陷，后续元素排版受溢出的浮动元素影响导致布局错乱。
2. 页脚与版权区块空白：浏览器对p、h2等块级元素有默认上下外边距，页脚底部的p标签默认margin-bottom和版权区块顶部的h2标签默认margin-top叠加形成空白间隔。

修复代码 #

在原有CSS代码中新增以下规则即可：

/* 解决浮动导致的页脚错乱 */
.twocolumns::after {
  content: "";
  clear: both;
  display: table;
}

/* 消除页脚与版权区块的空白 */
.footer {
  margin-bottom: 0;
}
.copyright h2 {
  margin-top: 0;
}

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