html - 徽标和页面标题向左 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>

最佳答案

将此添加到您的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>