css - リスト項目内でフローティングされているオブジェクトをクリアする

Question

各項目内に浮動オブジェクトがあるリスト項目があります。

html:

<ul>
  <li>
    <div class="icon" /><div class="text">blah</div>
  </li>
  <li>
    <div class="icon" /><div class="text">blah</div>
  </li>
</ul>

CSS:

.icon, .text { float: left; }
.text:after { clear: both; }

私の理解では、2 番目のスタイルではテキスト ボックスの後に clear: both を追加する必要があります。しかし、そうではないようです。

通常、「クリア」のクラスを持つ .text div の後に追加の DIV を追加しますが、多くの人がそれを行わず、単純に:afterセレクターを使用することに気付きました。ハックの少ないコードに。

これがどのように機能するかについて私が見逃していることについての指針はありますか? 乾杯