float:left and display:block contradiction

Question

Navigation bars use float:left to order the list items side by side. However, doesn't using float imply the use of display:block? Therefore, since block elements are stacked vertically, why does float:left put them next to one another? Also, from W3C:

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

(emphasis mine)

Doesn't this mean that each element should be stacked vertically if it is a block no matter what?

Answer 1

Later on in the specification you have the section on floats, where you can find:

"A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there is a line box, the outer top of the floated box is aligned with the top of the current line box.

If there is not enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present.

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float."

Note the "Since a float is not in the flow" which means that floats are not laid out as blocks in the block formatting context. Floats are laid out according to their own rules, and doesn't affect block elements in the flow (but can affect the text flow inside the blocks).

If you have floating elements followed by a non-floating element, the floating elements will be placed to the left or right, then the non-floating element are placed as blocks as if the floating elements didn't exist.

Two elements floating to the left and right, followed by a non-floating element:

<div class="a"></div>
<div class="b"></div>
<div class="c">text</div>

CSS:

.a { float: left; background: red; width: 50px; height: 50px; }
.b { float: right; background: green; width: 50px; height: 50px; }
.c { background: yellow; height: 100px; }

The floating elements will end up on top of the non-floating element, but the text in it will flow around the floating elements:

+------+--------------------------------------+------+
|      |text                                  |      |
|      |                                      |      |
|      |                                      |      |
+------+                                      +------+
|                                                    |
|                                                    |
|                                                    |
+----------------------------------------------------+

Demo: http://jsfiddle.net/Guffa/kmbuw53v/