html - 如何让元素停止忽略它们包含的 float 元素

Question

我有这个代码:

div#navigation a {
  display: block;
  padding: 7px 12px;
  font-size: 18px;
}
div#navigation ul {
  list-style: none;
  margin: 0px auto;
}
div#navigation ul li {
  float: left;
  min-width: 50px;
  text-align: center;
  min-height: 30px;
}
div#navigation {
  overflow: hidden;
}

<div id="navigation">
  <ul>
    <li>
      <a href="/">Start</a>
    </li>
    <li>
      <a href="">Test 1</a>
    </li>
    <li>
      <a href="">Test 2</a>
    </li>
    <li>
      <a href="">Test 3</a>
    </li>
  </ul>
</div>

发生的是 <ul>没有任何高度，即使它的列表元素有一些高度。和 clear不解决问题。我对 <div id="navigation"> 有同样的问题，但最后一条命令解决了问题。不幸的是，这似乎不适用于 <ul> .

有人可以向我解释为什么会发生这种情况以及如何避免这种情况吗？

Answer 1

这是使用 How do you keep parents of floated elements from collapsing? 中的解决方案对您的代码片段进行的有效更新.

只需将此添加到您的代码中:

div#navigation ul:after {
      content: " ";
      display: block; 
      height: 0; 
      clear: both;
    }

div#navigation a {
  display: block;
  padding: 7px 12px;
  font-size: 18px;
}
div#navigation ul {
  list-style: none;
  margin: 0px auto;
  background: red;
}
div#navigation ul:after {
  content: " ";
  display: block; 
  height: 0; 
  clear: both;
}
div#navigation ul li {
  float: left;
  min-width: 50px;
  text-align: center;
  min-height: 30px;
}
div#navigation {
  overflow: hidden;
}

<div id="navigation">
  <ul>
    <li>
      <a href="/">Start</a>
    </li>
    <li>
      <a href="">Test 1</a>
    </li>
    <li>
      <a href="">Test 2</a>
    </li>
    <li>
      <a href="">Test 3</a>
    </li>
  </ul>
</div>