Html 防止将UL和LI元素漂浮在收割台下方

下面是标题内的菜单。ul和li元素是浮动的，现在浮动在标题下，我已经尝试用clear:两者来阻止它。然而，这似乎不起作用，所以我想知道。。。有什么不对劲

html:

<header>
    <ul>
        <li><a href='#'>Item 1</a></li>
        <li><a href='#'>Item 2</a></li>
        <li><a href='#'>Item 3</a></li>
        <li><a href='#'>Item 4</a></li>
    </ul>
    <div class='clear'/>
</header>

header {
    background: #888;
    height: 20px;
    padding: 10px;
}

ul{
  margin: 18px 0;
  padding: 0;
  list-style: none;
}

ul li{
  margin: 0 10px 0 0;
  padding: 0;
  display: block;
  float: left;
  width: 80px;
  height: 20px;
  border: 1px solid #000;
  background: red;
}

ul li a{
  display:block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  float: left;
  text-align: center;
  padding-top: 2px;
}

ul li a:hover{
  color: #fff;
  background-color: #000;
}​

.clear {
    clear:both;
}

---

您不能对div使用

/>

。将其从

更改为

或者尝试在当前li的下方添加另一个li，并将其设置为clear类

<header>
    <ul>
        <li><a href='#'>Item 1</a></li>
        <li><a href='#'>Item 2</a></li>
        <li><a href='#'>Item 3</a></li>
        <li><a href='#'>Item 4</a></li>
        <li class='clear'></li>
    </ul>
</header>

您可以使用clearfix：

.clearfix:after {
  clear:both;
  content:".";
  display:block;
  height:0;
  line-height:0;
  visibility:hidden;
}

---

并将其应用于ul和标题

更好的css适合您的情况（在FF、Chrome、IE6+中测试）

---

与其使用cleardiv，不如试试HTML5样板中的标准clearfix

以下是修改后的标记：

  <header class="clearfix">
      <ul>
          <li><a href='#'>Item 1</a></li>
          <li><a href='#'>Item 2</a></li>
          <li><a href='#'>Item 3</a></li>
          <li><a href='#'>Item 4</a></li>
      </ul>
  </header>

从文档中：

.clearfix

将.clearfix添加到元素将确保它始终完全包含其浮动子元素。多年来，clearfix黑客有很多变种，还有其他一些黑客也可以帮助您控制浮动儿童，但HTML5样板文件目前使用micro clearfix

---

你想在这里完成什么？这个div是空的，那么将它放在标题中有什么意义呢？问题是

li

s也是浮动的。这不是答案，但我总是觉得在容器上使用

overflow:hidden

hack更好。您可能想在这里放弃

float

概念。有一个很好的方法可以让

显示：inline block

工作（即使在旧的IE浏览器中），并用更好、更简单的代码实现您想要的。而且@PeeHaa是正确的-如果你要浮动，

overflow:hidden

是一种更好的方法，可以强制容器包装浮动。@PeeHaa-这很有技巧。完全同意。这就是为什么我们都喜欢旧的IE浏览器……如果你去掉关于self-closing

div

s的错误声明，我将删除我的否决票。div不是有效的self-closing标记Gareth。

  <header class="clearfix">
      <ul>
          <li><a href='#'>Item 1</a></li>
          <li><a href='#'>Item 2</a></li>
          <li><a href='#'>Item 3</a></li>
          <li><a href='#'>Item 4</a></li>
      </ul>
  </header>

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}


.clearfix {
    *zoom: 1;
}