正确清理浮动的<li> </li>

Question

我通过float: left;处理class="clearfix"和Eric Meyer的CSS重置问题。但有一个特殊情况，我想知道如何正确清除浮动元素：在<ul> ... </ul>内。

Wrong height of the <ul> though using a clearer. The clearer should be within the <ul>. Let's try ...

Correct height, but the HTML-code ist not valid!

如何使用有效代码清除<ul>中的浮动？

谢谢，约翰内斯

Answer 1

只需将overflow: hidden添加到ul元素的规则集即可。在Google或Stack Overflow上搜索“清除浮动”以获取其他解决方案，但在这种情况下，这应该是最干净的。

jsfiddle demo：http://jsfiddle.net/9sxrN/1/

Answer 2

据我所知，float可以应用于无法插入UL的块元素。 （既不是div，也不是BR，你不能在UL中插入）。事实上你可以，但它无效。

所以，我用div容器覆盖你的ul：

<div class="ul-container">
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<br style="clear:both">
</div>
<b>The height of the ul-tag is ok, but the code is not valid!</b>

和css of ul a made css of .ul-container

.ul-container {
    border: 2px solid red;
}

ul li {
    float:left;
    background: #ccc;
    margin: 5px;
}

Answer 3

在overflow:hidden;

上使用ul