在 HTML5 中重叠 div 元素

Question

我在下面的代码中做了 3 div。第一个有导航元素，第二个有部分元素。

如果你运行上面的代码你会看到导航的边框和两个部分。我怀疑第一部分的边界离开了元素应位于导航栏边框的右侧。但自从它不存在（可以通过运行ning 代码看出），这意味着 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>

现在不重叠了。这是您浮动元素时的预期行为。

<!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>

Answer 2

问题出在float 如果你不想重叠它们。尝试 flex-box

这是一个demo

   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;
   }

<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>

Answer 3

您的 .a 方块没有高度。给它添加一个 clearfix

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

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

Answer 4

当div元素设置为浮动并设置宽度时，div高度将调整为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 中重叠 div 元素

Overlapping of div element in HTML5

html

css

css-float