Question

我在CSS和HTML中有一些代码。这些代码可以正常工作，但在版权部分存在一个CSS问题。这是我给“版权”课程的最高要求。它停留在比我想要的高得多的位置。它显示在“服务”类上方。请给我一些标准的代码系统，以及解释为什么发生的原因，以便我可以在此html或CSS代码中应用。

摘要：

body {
  width: 800px;
  margin: 0 auto;
}

.header {
  margin-bottom: 10px;
  overflow: hidden;
}

.main_menu {
  display: flex;
}

.main_menu .menuitems {
  list-style: none;
  padding: 10px;
}

.menuitems a {
  text-decoration: none;
}

.company_logo {
  float: left;
}

.nav {
  float: right;
}

.items {
  width: 200px;
  float: left;
}

.lower_part {
  float: left;
}

.about_us {
  float: left;
  width: 350px;
  margin-right: 50px;
}

.about_us_heading img {
  width: 30px;
  height: 30px;
}

.about_us_heading {
  display: flex;
  align-items: center;
}

.img1 {
  width: 80px;
  height: 80px;
}

.footer_part {
  width: 800px;
}

.footer {
  display: block;
  float: left;
  width: 240px;
  margin-right: 10px;
  padding-bottom: 80px;
}

.copyright {
  border-top: 1px solid red;
}

.copyright_section {
  float: left;
}

.social_icons {
  float: right;
}

.si {
  width: 35px;
  height: 35px;
}

<!DOCTYPE HTML>
<html>

<head>

  <title>My website</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="Style.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

</head>

<body>

  <header class="header">
    <div class="company_logo">
      <h3>Fadelicious</h3>
    </div>
    <div>
      <nav class="nav">
        <ul class="main_menu">
          <li class="menuitems"><a href="#">Home</a></li>
          <li class="menuitems"><a href="#">Blog</a></li>
          <li class="menuitems"><a href="#">Portfolio</a></li>
          <li class="menuitems"><a href="#">Services</a></li>
          <li class="menuitems"><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <section>

    <div class="description">
      <p class="desc_para">Hi! This is Fadelicious. New unique look for your blog & portfolio. Vivamus porttitor tristique augue a vestibulum. Maecenas sodales risus porta mi semper in auctor massa posuere.</p>
    </div>

    <div class="services">

      <div class="items">
        <img src="img/" />
        <h3>Package Design</h3>
        <p class="item_para">Praesent erat anteport hanip, condimentum quis facilisisac condimentum in ipsum.</p>
      </div>

      <div class="items">
        <img src="img/" />
        <h3>Web Design</h3>
        <p class="item_para">Duis quam ipsum, pharetra nec iaculis non, laoreet et nunc. Ut luctus justo velerat lacinia.</p>
      </div>

      <div class="items">
        <img src="img/" />
        <h3>E-Commerce</h3>
        <p class="item_para">Sed sit amet tortor vel risus volutpat pretium non at estar. Maecenas vitae lectus moles</p>
      </div>

      <div class="items">
        <img src="img/" />
        <h3>Full Support</h3>
        <p class="item_para">Curabitur nulla antenov, ullamcorper eu iaculis utar, convallis ac massa.</p>
      </div>

    </div>

    <div class="lower_part">

      <div class="about_us">
        <div class="about_us_heading">
          <img src="img/" />
          <h3>About Us</h3>
        </div>
        <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
          <p>

            <p>Ut enim ad minima veniam, quis nostrum exercitationem ul lam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>
      </div>

      <div class="about_us">

        <h3>Latest Work</h3>
        <div class="latest_img">
          <img class="img1" src="img/" />
          <img class="img1" src="img/" />
          <img class="img1" src="img/" />
          <img class="img1" src="img/" />
        </div>
      </div>

    </div>

  </section>

  <footer>
    <div class="footer_part">
      <div class="footer">
        <h3>Recent Posts</h3>
        <ul class="list_of_items1">
          <li class="list_items1"><a>Duis id tellus at eros tempor imper.</a></li>
          <li class="list_items1"><a>Aenean ligula nisl, fermentum vel lobortis id, scelerisque at lorem.</a></li>
          <li class="list_items1"><a>Suspendisse nec neque ut nunc rhoncus sodales.</a></li>
          <li class="list_items1"><a>Duis id Nam pulvinar faucibus dui.</a></li>
          <li class="list_items1"><a>Pellentesque pulvinar sagittis.</a></li>
        </ul>
      </div>
      <div class="footer">
        <h3>Archives</h3>
        <ul class="list_of_items2">
          <li class="list_items2"><a>January 2010</a></li>
          <li class="list_items2"><a>February 2010</a></li>
          <li class="list_items2"><a>March 2010</a></li>
          <li class="list_items2"><a>April 2010</a></li>
          <li class="list_items2"><a>May 2010</a></li>
          <li class="list_items2"><a>June 2010</a></li>
        </ul>
      </div>

      <div class="footer">
        <h3>Twitter</h3>
        <p>Sed ut perspiciatis unde omnis iste natus, error sit voluptatem accusantium doloremque laudantium, totam rem aperiamea. 3 hours ago </p>
        <p>@jacquelinecharl</p>
      </div>

    </div>

    <div class="copyright">

      <div class="copyright_section">
        <p>© Copyright 2010 Starlight. All Right Reserved</p>
      </div>
      <div class="social_icons">
        <img class="si" src="img/">
        <img class="si" src="img/">
        <img class="si" src="img/">
        <img class="si" src="img/">
        <img class="si" src="img/">
      </div>

    </div>
  </footer>

</body>

</html>

Answer 1

注意：浮动元素之后的元素将在其周围流动。为避免这种情况，请使用clear属性或clearfix hack（请参阅本页底部的示例）。

来自w3schools

要清除部分内容，请使用以下代码：

section::after {
  content: '';
  display: block;
  clear: both;
}

为什么在页脚部分顶部给出的边框比期望的要远得多？

1 个答案: