当我在 header 中给出边界有问题时？

Question

当我在底部给出边框时，它会上升，而 header 会下降，正如我们在代码中看到的那样，粉红色线条边框会上升，我希望它在全名下方

我正在使用这个网站的参考并自己制作https://codepen.io/techie4good/pen/RGNBPQ?q=resume&limit=techie4good

body {
  font-family: Arial, sans-serif;
  font-size: 1.1em;
  width: 75%;
  margin: 0 auto;
}

.main {
  color: #4EC5C1;
}

#name {
  float: left;
}

#contact {
  float: right;
  list-style-type: none;
}

#workExperiance {
  float: left;
}

header {
  border-bottom: solid 2px pink;
  margin: 70px;
}

<html lang="en">

<head>
  <title>Full Name Resume</title>
  <meta charset=utf-8>
</head>

<body>
  <header>
    <section>
      <h1 id="name"><span class="main">full </span> Name</h1>
    </section>
    <section>
      <ul id="contact">
        <li><span class="main">Cell:</span> +1-000000000</li>
        <li><span class="main">Email: </span> aaaaaa@gmail.com</li>
        <li><span class="main">Location:</span> NY,USA.</li>
      </ul>
    </section>
  </header>
  <section id="workExperiance">Work Experience</section>
</body>

</html>

Answer 1

添加这行 CSS 代码：

header:after {
  content: "";
  display: table;
  clear: both;
}

body {
  font-family: Arial, sans-serif;
  font-size: 1.1em;
  width: 75%;
  margin: 0 auto;
}

.main {
  color: #4EC5C1;
}

#name {
  float: left;
}

#contact {
  float: right;
  list-style-type: none;
}

#workExperiance {
  float: left;
}

header {
  border-bottom: solid 2px pink;
  margin: 70px;
}

header:after {
  content: "";
  display: table;
  clear: both;
}

<html lang="en">

<head>
  <title>Full Name Resume</title>
  <meta charset=utf-8>
</head>

<body>
  <header>
    <section>
      <h1 id="name"><span class="main">full </span> Name</h1>
    </section>
    <section>
      <ul id="contact">
        <li><span class="main">Cell:</span> +1-000000000</li>
        <li><span class="main">Email: </span> aaaaaa@gmail.com</li>
        <li><span class="main">Location:</span> NY,USA.</li>
      </ul>
    </section>
  </header>
  <section id="workExperiance">Work Experience</section>
</body>

</html>

Answer 2

显然 float:left 是违规者...删除它并且有效...

body {
      font-family: Arial, sans-serif;
      font-size: 1.1em; 
      width: 75%;
      margin: 0 auto;
    }
    .main{color: #4EC5C1;}
    #contact{float:right;list-style-type:none;}
    #workExperiance{float:left;}
    header{border-bottom:solid 2px pink; margin: 70px;}

<html lang="en">
    
    <head>
      <title>Full Name Resume</title>
      <meta charset=utf-8>
    </head>
    
    <body>
      <header>
        <section>
          <h1><span class="main">full </span> Name</h1>
        </section>
        <section>
          <ul id="contact">
            <li><span class="main">Cell:</span> +1-000000000</li>
            <li><span class="main">Email: </span> aaaaaa@gmail.com</li>
            <li><span class="main">Location:</span> NY,USA.</li>
          </ul>
        </section>
      </header>
      <section id="workExperiance">Work Experience</section>
    </body>
    
    </html>

Answer 3

将 float: left;width: 100%; 添加到 .header class

body {
  font-family: Arial, sans-serif;
  font-size: 1.1em;
  width: 75%;
  margin: 0 auto;
}

.main {
  color: #4EC5C1;
}

#name {
  float: left;
}

#contact {
  float: right;
  list-style-type: none;
}

#workExperiance {
  float: left;
}

header {
  border-bottom: solid 2px pink;
  margin: 70px;
  float: left;
  width: 100%;
}

<html lang="en">

<head>
  <title>Full Name Resume</title>
  <meta charset=utf-8>
</head>

<body>
  <header>
    <section>
      <h1 id="name"><span class="main">full </span> Name</h1>
    </section>
    <section>
      <ul id="contact">
        <li><span class="main">Cell:</span> +1-000000000</li>
        <li><span class="main">Email: </span> aaaaaa@gmail.com</li>
        <li><span class="main">Location:</span> NY,USA.</li>
      </ul>
    </section>
  </header>
  <section id="workExperiance">Work Experience</section>
</body>

</html>

当我在 header 中给出边界有问题时？

when i am giving border having issue in header?

html

css

css-float