html - HR没有出现在适当的位置

Question

试图用一条简单的水平线分隔我的标题和导航选项卡。没什么特别的。

然而，出于某种原因，它出现在标题上方。我知道这与 Twitter 按钮和公司 Logo 的 float 有关。在我这样做之前，这条线应该出现了。我被困在这里。

.main_header {
  background: #d0d0d0
}

.company_logo {
  float: left;
  text-align: left;
  padding: 10px 0 10px 50px;
}

.twitter {
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}

<header class="main_header">
  <div class="company_logo">
    <img src="images/logo.png" width="20%">
  </div>
  <div class="twitter">
    <a href="https://twitter.com/kali"></a>
  </div>
</header>


<hr>

<nav class="navbar">
  <div class="container">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="port.html">Portfo</a></li>
      <li><a href="ser.html">Servi</a></li>
      <li><a href="contact">Contact</a></li>
    </ul>
  </div>
</nav>

Answer 1

你是对的。由于 .main_header 的子项是 float 的，因此它们的父项没有高度。
一种解决方案是 clear the floats .

下面，我正在使用 group 类和 clearfix 之一方法。
如需进一步引用，请参阅 What methods of ‘clearfix’ can I use?

.main_header {
  background: #d0d0d0
}

.company_logo {
  float: left;
  text-align: left;
  padding: 10px 0 10px 50px;
}

.twitter {
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}

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

<header class="main_header group">
  <div class="company_logo">
    <img src="images/logo.png" width="20%">
  </div>
  <div class="twitter">
    <a href="https://twitter.com/kali"></a>
  </div>
</header>

<hr>

<nav class="navbar">
  <div class="container">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="port.html">Portfo</a></li>
      <li><a href="ser.html">Servi</a></li>
      <li><a href="contact">Contact</a></li>
    </ul>
  </div>
</nav>