清除在列表项中浮动的对象

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; }

我的理解是第二种风格应该添加一个明确的：在文本框之后。但似乎并非如此。

通常情况下，我会在.text div之后添加一个额外的DIV，它有一个'清除'类或者那个可以清除对象的东西，但我注意到很多人不这样做而只是使用:after选择器，等同于较少的hacky代码。

关于我如何工作的任何指示？干杯