Float awkward situation

Question

I have 3 div elements on a page with the float attribute set to left.

I add another div element without any styles but it's arranged like the ones I told you about above. Why ? I can't understand this.

Thank you

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

The last div needs to clear the floats.

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