在HTML5中重叠div元素

2023年10月22日 206次阅读

我在下面的代码中做了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>

最佳答案 它实际上并不重叠.因为你的红色边框是3px宽,所以看起来如此.看看当我制作1px时会发生什么.

编辑

我通过以下方式清除了导航的浮动：

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