html - 页面的 Logo 和标题向左浮动，但导航和部分主要内容挡住了去路

Question

我将 Logo 图像和页面标题 float 到左侧，但是 nav 和一些主要内容一起挡住了路。我试图清除 nav 但是当我想显示我的内联 nav 时它会把它扔掉。所以我不能那样做。

有人知道该怎么办吗？

* {
  margin: 0px;
  padding: 0px;
}
header,nav,section,article,aside,footer {
  display: block;
}
.container {
  width: 960px;
  margin: 0 auto;
}
.main_header img {
  float: left;
}
.main_header h1 {
  float: left;
}

<header class="main_header">
  <img src="logo2.jpg" alt="logo pic">
  <h1>Title of header</h1>
</header>

<nav>
  <ul>
    <li><a href="">Home</a>
    </li>
    <li><a href="">About</a>
    </li>
    <li><a href="">Contact</a>
    </li>
  </ul>
</nav>

Answer 1

将此添加到您的 CSS:

header{clear:both; overflow:hidden;}
nav ul li {display:inline;}

* {
  margin: 0px;
  padding: 0px;
}
header,nav,section,article,aside,footer {
  display: block;
}
.container {
  width: 960px;
  margin: 0 auto;
}
.main_header img {
  float: left;
}
.main_header h1 {
  float: left;
}
header{clear:both; overflow:hidden;}
nav ul li {display:inline;}

<header class="main_header">
  <img src="logo2.jpg" alt="logo pic">
  <h1>Title of header</h1>
</header>

<nav>
  <ul>
    <li><a href="">Home</a>
    </li>
    <li><a href="">About</a>
    </li>
    <li><a href="">Contact</a>
    </li>
  </ul>
</nav>