html - float 尴尬局面

Question

我在页面上有 3 个 div 元素，其 float 属性设置为左侧。

我添加了另一个没有任何样式的 div 元素，但它的排列与我在上面告诉您的那些一样。为什么 ？我无法理解这一点。

谢谢

代码:

  <div style="float:left">
   test first
  </div>

 <div style="float:left">
  test second
 </div>


 <div style="float:left">
   test third
 </div>

 <div>
  test fourth
 </div>

Answer 1

最后一个 div 需要清除 float 。

HTML

<div class="left">text</div>
<div class="left">text</div>
<div class="left">text</div>

<div class="clear-left">text</div>

CSS

.left { float: left; }
.clear-left { clear: left; }

JSFIDDLE