Clearing a float on an element makes it jump below a non-floated element

This is hard to explain, so let me just give you a link: http://jsbin.com/izinoy/6/edit#html,live. You can easily see the unwanted behaviour: the box "six" jumps below the left navigation, because I applied a clear: left.

But I don't want this to happen, obviously. I don't know why this happens, cause the navigation is not floated, so why does it jump below navigation and how can I "fix" this?

EDIT: There's a problem with my question. I don't know how this happened :-/, but in the question I said that navigation is not floated, even though it is! That's why the float didn't make sense to me. I overlooked this 开发者_开发百科"tiny" detail. Yes, it's now obvious why the box "six" jumps below the navigation.

The .box selector defines float: left. This property causes the element to float.

About clear:left, let me quote https://developer.mozilla.org/en/CSS/clear:

The clear property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.

left: Element is moved down to clear past left floats.

Remove float: left if you want to align all boxes vertically. Remove clear:left if you don't want the div elements to shift down.