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: