Question

我有这段代码：

＆＃13;

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

＆＃13;

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

＆＃13;

即使列表元素有一些高度，<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>

Answer 2

如果您使用Bootstrab作为基础，则可以在clearfix中添加课程ul。如果没有，只需使用以下参数创建一个类clearfix：

.clearfix:after, .clearfix:before {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

或者点击此处。

https://fiddle.jshell.net/6L1kxhhf/

：）

如何使元素停止忽略它们包含的浮动元素

2 个答案: