Css Floating Elements

[kingturq]

I was told by a friend a while back that right floated elements should come first in my document, but I think I misunderstood what he was trying to tell me, I wondered if someone could explain why if I have both the right floated divs first that the first left floated div is cleared and comes on the line after the first right floated div? Here is a snippet that doesnt perform as I would want (2 left and 2 right floated stacks adjacent to each other)\[code\]<div style="margin-left: auto; margin-right: auto; height: 600px; border: 1px solid black"> <div style="width: 200px; height: 200px; background-color: red; float:right;"></div> <div style="width: 200px; height: 200px; background-color: green; float:right; clear: right"></div> <div style="width: 200px; height: 200px; background-color: yellow; float:left; clear: none"></div> <div style="width: 200px; height: 200px; background-color: purple; float:left; clear: left"></div> </div>\[/code\]JSfiddleAnd here it works as I would want but I have had to move the order of the elements around in the document:\[code\]<div style="margin-left: auto; margin-right: auto; height: 600px; border: 1px solid black"> <div style="width: 200px; height: 200px; background-color: red; float:right;"></div> <div style="width: 200px; height: 200px; background-color: yellow; float:left; clear: none"></div> <div style="width: 200px; height: 200px; background-color: green; float:right; clear: right"></div> <div style="width: 200px; height: 200px; background-color: purple; float:left; clear: left"></div> </div>\[/code\]JSFiddleSorry if this has already been answered and Im sure it is a simple question to answer, I would like to know why I need to go right floated, left floated but then for the next floats it doesnt seem to matter if right or left floated comes first.Thanks