内容落后于导航

Question

我对花车有疑问。我想要一个中间有导航和文本的侧边栏，但文本位于导航下方。我也试过 float with clear and clear alone.

我做错了什么？

body {
  margin: 0;
  padding: 0;
  background-color: #93ece7;
}
.Wrapper {
  position: relative;
  width: 1200px;
  height: 1000px;
  overflow: auto;
  margin: auto;
  background-color: white;
}
.Header {
  margin: 0;
  background-color: #aaa;
  color: #fff;
}
.Header h1 {
  margin: 0px;
  padding: 10px 0px 10px 0px;
  text-align: center;
}
.Header p {
  text-align: center;
  position: relative;
  bottom: 25px;
  font-size: 90%
}
.nav {
  position: absolute;
  top: 71.9px;
  left: -39.9px;
  float: right;
}
.nav ul {
  list-style: none;
  float: right;
}
.nav ul li {} .nav ul li a {
  text-decoration: none;
  color: black;
  display: block;
  background-color: #aaa;
  padding: 10px;
  t;
}
.nav ul li a:hover {
  background-color: #999;
  color: white;
}
.nav ul li span {
  display: block;
  padding: 10px;
  font-size: 104%;
  background-color: #999;
}
.content {
  clear: both;
}

<!--start wrapper-->
<div class="Wrapper">

  <!--start header-->
  <div class="Header">
    <header>
      <h1>Tam &amp; Ils</h1>
      <p>knutselen en freubelen met tam &amp; ils</p>
    </header>
  </div>
  <!--end header-->

  <!--start nav-->
  <div class="nav">

    <nav>
      <ul>
        <li><span>Menu</span></li>
        <li><a href="#">Over ons</a></li>
        <li><a href="#">Social Media</a></li>
        <li><a href="#">Contact</a></li>
        <li><span>Producten</span></li>
        <li><a href="#">Ringen</a></li>
        <li><a href="#">Kettingen</a></li>
        <li><a href="#">Tassen</a></li>
        <li><a href="#">Freubles</a></li>
        <li><span>Tutorials</span></li>
        <li><a href="#">Ring Maken</a></li>
        <li><a href="#">Ketting Technieken</a></li>
        <li><a href="#">Tassen Hakken</a></li>
      </ul>
    </nav>
  </div>
  <!--end nav-->

  <!--start content-->
  <div class="content">
    <main>
      <span>welkom op onze website</span>
      <p>welkom op deze website wij zij gek van kunstelen, freubelen en vooral lachen. OP deze website kun je dingen kopen en leren hoe je dingen die wij maken kunt maken</p>
    </main>
  </div>
  <!--end content-->

  <!--start footer-->
  <div class="footer">
    <footer>
      <p>copyright &copy; 2016 Youri Claes</p>
    </footer>
  </div>
  <!--end footer-->

</div>
<!--end wrapper-->

这是HTML 这是 CSS.

其他一些重要信息：

编辑：方括号
系统：win 7
浏览器：Google Chrome

Answer 1

你的代码有很多问题，但有几点需要注意：

我建议像这样创建一个 jsFiddle 演示：https://jsfiddle.net/azizn/o28zLgr6/
当您将 position:absolute 应用于某个元素时，浮动变得无关紧要，该元素将失去其位置并与其他元素重叠。
本应是动态的容器无需设置高度（高度会根据内容自动调整）
如果你想要双列布局建议将两列都包裹在一个容器中，这是最基本的结构

CSS

.wrapper { overflow:auto; }
.content { float:right; width:80%;}
.sidebar { float:left: width:20%; }

HTML

<div class="wrapper">
  <div class="sidebar">
    ...
  </div>
  <div class="content">
    ...
  </div>
</div>

请注意，边距和填充会破坏布局，因为它们会增加总宽度，因此请尽量避免使用它们或添加 box-sizing:border-box;

总结

这是您网站的固定版本，其中的注释解释了更改内容和原因：

https://jsfiddle.net/azizn/o28zLgr6/1/

因为你没有将 .content 和 .sidebar 一起包装在一个容器中，我已经使用具有 clear:both 属性的 div 清除了浮动.

内容落后于导航

Content going behind nav

html

css

css-float

总结