html - 毎回クリアせずにli要素で2つの要素をフロートする方法

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(と)のimga内容のみをフロートする場合overflowは、 のliをautoorに設定するだけでhidden、期待どおりに機能します。

li{overflow:auto;}

http://jsfiddle.net/SqWHB/のデモ

Answer 2

クリアが必要なのは 1 回だけで、それは ul の後です。

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

Answer 3

はい、clearfix のクラスを使用します。

このcssを追加します：

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

.clearfix:after {
      clear: both;
}