Float behavior confusion

Question

I always thought that setting a float property resulted in non-floated objects acting as if the floated object was not there
however look at this code
<div style="width:100px; height:100px; background-color:#03C;"></div>
<div style="width:100px; height:100px; background-color:#F36;"></div>
<div style="width:100px; height:100px; background-color:#F36; float:left;"></div>
<div style="width:100px; height:100px; background-color:#F36; float:left;"></div>
some divs are floated some are not
if i place the non floated ones on top the floated ones appear bellow where they would if there was no floating at all.
but if i place the floated ones on top the non floated ones position themselves where the floated ones are as if the floated ones do not exist.
so why is it that floated/non floated elements ignore each other if the non-floated element comes first but not if its the other way arround

Answer 1

when applying clear which block do i apply it to?
if i apply it to the final block before the block which i intend to change the behavior of will it changhe the behavior of the block that i applied it to
if i apply it to the first block that should ignore the float then what happens if this block itself must also be floated in order to effect the behavior of blocks which come after it.
is there any reason why float/clear cannot be unused and simply use display:block and display:inline instead?
frankly the confusion caused by css float/clear, espcially when combined with different display properties really annoys me
Basic css, mysql and javascript did not cause me this sort of headache, basic AS3 did but only because i tried to run before i could walk.
css is far more basic than any of these technologies and yet it causes me more grief than any of them.