Question

我在以下代码中制作了3个div。第一个有导航元素，另外两个有截面元素。

如果您运行上面的代码，您将看到导航的边框和两个部分。我怀疑是第一节的边界还剩下元素应该在导航栏边框的右侧。但既然如此不存在（可以通过运行代码看到），这意味着div“a” 和“b”重叠。我是以正确的方式思考的吗？如果我是的话对，为什么CSS设计成这种重叠div的方式。

事实上，这与在CSS中引入div的原因相矛盾。

nav {
  float: left;
  width: 200px;
  border: 1px solid black;
}
section {
  border: 3px solid red;
}

<div class="a">
  <nav>
    <span>nav</span>
    <ul>
      <li><a target="_blank" href="/default.asp">Home</a>
      </li>
      <li><a target="_blank" href="default.asp">CSS</a>
      </li>
      <li><a target="_blank" href="/html/default.asp">HTML</a>
      </li>
      <li><a target="_blank" href="/js/default.asp">JavaScript</a>
      </li>
    </ul>
  </nav>
</div>
<div class="b">
  <section>
    <span>section</span>
    <p>Notice we have put a clearfix on the div container. It is not needed in this example, but it would be if the nav element was longer than the non-floated section content.</p>
  </section>
</div>
<div class="c">
  <section>
    <span>section</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce
      luctus vestibulum augue ut aliquet.</p>
  </section>
</div>

Answer 1

它实际上并没有重叠。因为你的红色边框是3px宽，所以看起来如此。看看当我制作1px时会发生什么。

修改

我清除了nav上的浮动：

<div style="clear:both"></div>

现在它并没有重叠。浮动元素时，这是预期的行为。

＆＃13;
＆＃13;
<!DOCTYPE html> <html> <head> <style> nav { float: left; width: 200px; border:1px solid black; } section { border: 1px solid red; } </style> </head> <body> <div class="a"> <nav> <span>nav</span> <ul> <li><a target="_blank" href="/default.asp">Home</a></li> <li><a target="_blank" href="default.asp">CSS</a></li> <li><a target="_blank" href="/html/default.asp">HTML</a></li> <li><a target="_blank" href="/js/default.asp">JavaScript</a></li> </ul> </nav> <div style="clear:both"></div> </div> <div class="b"> <section> <span>section</span> <p>Notice we have put a clearfix on the div container. It is not needed in this example, but it would be if the nav element was longer than the non-floated section content.</p> </section> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

问题是float 如果你不想重叠他们。试试flex-box

这是demo

＆＃13;

   nav {
/* float: left; */
  height: 100%;
  width: 200px;
  border:1px solid black;
   }
   .container{
  display: flex;
  height: 100%;
   }

   section {
  border: 3px solid red;
   }
   nav ul{
 margin:0;
   }

＆＃13;

<div class="container">
<div class="a">
<nav>
  <span>nav</span>
    <ul>
      <li><a target="_blank" href="/default.asp">Home</a></li>
      <li><a target="_blank" href="default.asp">CSS</a></li>
      <li><a target="_blank" href="/html/default.asp">HTML</a></li>
      <li><a target="_blank" href="/js/default.asp">JavaScript</a></li>
    </ul>
  </nav>
</div>
<div class="b">  
<section>
    <span>section</span>
    <p>Notice we have put a clearfix on the div container. It is not needed in this example, but it would be if the nav element was longer than the non-floated section content.</p>
  </section>
</div>
</div>
  <div class= "c">
<section>
    <span>section</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.</p>
  </section>
</div>

＆＃13;

Answer 3

您的.a区块没有高度。添加一个clearfix

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

<div class="a clearfix">
    //rest of code

Answer 4

当div元素设置为float并设置宽度时，div高度将调整div中的内容。这就是为什么它会溢出下一个下方。它使用div“b”来设置第一行的高度。

这就是你的目标：

https://jsfiddle.net/53q6e9hz/

nav {
  float: left;
  width: 200px;
  border: 1px solid black;
}
section {
  border: 3px solid red;
  display:block;
}
.b{
 width:calc(100% - 202px);
 float: left;
}
.row1{
  display:inline-block;
}

在HTML5

4 个答案: