css - 为什么我必须添加 "overflow:hidden"才能使导航栏在页面上可见？

Question

<分区>

Answer 1

Why does the navigation bar totally disappear from the page if I don't set the overflow of ul.navBar to hidden?

这是因为 .navBar 的子元素正在 float 。 float 元素脱离了正常的文档流，不占用空间。因为 child 不占空间 .navBar 没有高度。

添加 overflow: hidden; 会触发一个新的 block 格式化上下文，防止 .navBar 在有 float 子项时“折叠”。

---

有些人会建议使用display: inline-block;。请谨慎使用，因为每个元素周围都有空白，这会使它们比您想象的要大。尤其是在使用百分比宽度时。

例子:

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  width: 33.3333%;
}

.inline li {
  display: inline-block;
  background-color: gold;
}

.float li {
  float: left;
  background-color: indianred;
}

.flex {
  clear: left;
  display: flex;
  background-color: skyblue;
}

<ul class="inline">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<ul class="float">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<ul class="flex">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

这是关于 how to handle the white space 的一些选项如果您选择了 inline-block 路由。