Question

我正在努力解决一个小问题，我觉得对于有点css知识的人来说很容易:) 我正在做一个

<ul class="test">
    <li>1</li>
    <li>2</li>
</ul>
some other content

通过造型：

ul.test {
    list-style:none;
    margin:0;
    padding:0;
}

ul.test li {
    float:left;
}

这很简单。我的问题是：“其他一些内容”总是在ul旁边移动到顶部。一旦我将li设置为float:left，就会发生这种情况我怎么能避免这个？具有与<li>没有float:left的行为相同的行为。

Answer 1

您需要将<ul>代码设置为overflow: auto：

ul.test {
  list-style:none;
  margin:0;
  padding:0;
  overflow: auto;
}

您可以详细了解here。

Answer 2

当您在无序列表上设置float: left时，后面的其余内容也将尝试将自身对齐到左侧（在本例中为列表的右侧）。为防止这种情况发生，您需要清除浮动。一种方法是像KARASZI Istvan所提到的那样，将列表的溢出设置为auto。这是避免以“正确”方式清除浮动的技巧。

正确的方法是对后面的内容应用clear属性。

<ul class="test">
    <li>1</li>
    <li>2</li>
</ul>
<div style="clear: left | both">    
    some other content
</div>

在随后的内容中，您可以设置清除左浮动，但大多数人清除两个浮动以防万一。如你所见，我们需要在后面的内容上应用一种风格（或类），而且许多人不喜欢这样做，因此有许多自我清除技巧。

“自我清除”花车的另一种流行方式是使用“clearfix”黑客。一个clearfix hack被描述为here。

Answer 3

一个非常简单的HTML解决方案是：

<ul class="test"><li>1</li><li>2</li></ul>
<br/>
some other content

只需使用CSS，即可添加overflow: auto;或overflow: hidden;到ul.test样式

我建议您使用CSS解决方案。