html - 如何在li元素中浮动两个元素而不每次都清除

Question

我有一个堆叠列表，我想在其中浮动 img（图标）和文本。但是，我觉得在每个列表项之后清除它很痛苦。这里有什么解决方案？有什么技巧可以让它更干净吗？

<ul>
  <li><img src="#" /> <a href="#">Home</a></li>
  <div class="clear"></div>
  <li><img src="#" /> <a href="#">About</a></li>
  <div class="clear"></div>
</ul>

Answer 1

您可以将li元素设置为clear..

<ul>
  <li class="clear"><img src="#" /> <a href="#">Home</a></li>
  <li class="clear"><img src="#" /> <a href="#">About</a></li>
</ul>

---

如果您只浮动li( theimg和 thea ) 的内容，那么您只需将 theoverflow的内容设置li为autoor hidden，它就会按预期工作。

li{overflow:auto;}

演示在 http://jsfiddle.net/SqWHB/

Answer 2

是的，为 clearfix 使用一个类：

并添加这个 CSS：

.clearfix:before, .clearfix:after {
    display: table;
    line-height: 0;
    content: "";
}

.clearfix:after {
      clear: both;
}

Answer 3

你只需要清除一次，那就是在 ul 之后。

<ul>
   <li><img src="#" /> <a href="#">Home</a></li>
   <li><img src="#" /> <a href="#">About</a></li>
</ul>
<div class="clear"></div>