漂浮的尴尬局面

Question

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

我添加了另一个没有任何样式的div元素，但它的排列方式与我上面提到的相似。为什么？我无法理解这一点。

谢谢

CODE：

  <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需要清除花车。

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