Consider the following scenario:
<div class="right">Box right 1</div>
<div class="right">Box right 2</div>
<div class="left">Box left</div>
<p>... lengthy content ...</p>
and this CSS code:
.right { float:right; clear: right; }
.left { float:left; clear: left; }
div { /* some styles for the divs */ }
When viewed ([see demo](http://jsfiddle.net/uTRAr/1/)), the layout appears differently than expected.
I anticipated the left box to be top floated, as seen here:
Question: Why is the left box not being floated to the top? Even though it comes after in the markup, shouldn't div.left also start at the top?
Note: Removing clear: right from the CSS of class .right results in the desired top floating for the left box ([see demo](http://jsfiddle.net/uTRAr/3/)).
It seems that clear: right impacts left-floating elements as well...
Note 2: Rearranging the markup floats the boxes correctly ([demo](http://jsfiddle.net/uTRAr/4/)):
<div class="right">Box right 1</div>
<div class="left">Box left</div>
<div class="right">Box right 2</div>
<p>... lengthy text ...</p>