HR没有出现在适当的位置

Question

尝试用简单的水平线分隔我的标题和navtab。没有什么花哨。

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

.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

试试：

hr{
  clear: both;
}

应清除两侧的浮动元素。

Answer 2

你是对的。由于.main_header的孩子们漂浮，他们的父母没有高度。 一个解决方案是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>