Two right floated elements, one with a clear-right, are changing a left float, why?
Here's the situation: I have to two right floated elements and one left floated element inside a container. Each right floated element is a set width, the second right floated element has a clear: right; applied so it goes underneath the other right floated element.
Then, I have a left floated element inside a standard paragraph. This left floated element is being cleared below the first right float, even though the only clearing rule is clear: right;
In essence, I have no idea why my left float is being effected at all when I was under the impression that the right floats should work on their own.
I know how to fix this problem, so that's not really my question. I just really want to know why this is happening, and how in the world it could be what's expected to happen under the CSS spec.
Insight would be great. I feel like I have a darn good knowledge of CSS so this whole situation is a bit perturbing to me. Thanks for your time everyone!
Here is the example of what I am talking about: http://imulus.net/css_examples/float-issue.html