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

我有一个列表项，每个项中都有浮动对象

html:

我的理解是，第二种样式应该在文本框后添加一个清晰的：both。但事实似乎并非如此

通常，我会在.text DIV后面添加一个额外的DIV，该DIV有一个“cleared”类，或者其他一些可以清除对象的影响，但是我注意到很多人不这样做，只是简单地使用

：after

选择器，相当于不太粗糙的代码

---

有没有关于我所缺少的关于这个如何工作的建议？干杯

在我的代码中，它们不是自动关闭的，我只是出于伪理由才这样做的。但我不知道Css3使用双冒号！谢谢你！

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

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