CSS float arbitrarily wrapping non-quirks mode despite having room

I have come across a weird problem where floated elements wrap to the next line when there is still plenty of space for them. I realize this can be solved by removing the < p > or the < div > but I want clean valid code. Most importantly I want to know why this is happening.

HTML:

<div class="section" style="width: 8000px;">
    <div style="" class="bottom">
        <div class="img6"></div>
        <p class="n">
        <a href="index.html" class="b t1"></a>
        <a href="a.html" class="b t2"></a>
        <a href="ab.html" class="b t3"></a>
        <a href="abc.html" class="b t4"></a>
        </p>
    </div>
</div>

CSS:

p.n{margin:0;}
div.section{width: 8000px;}
div.section:after{content:"开发者_如何转开发";display:block;clear:left;}
div.section div{float:left;}
a.b{display:block;float:left;}
div.img6{background:#933;width:78px;height:15px;}
a.t1{background:#123;width:74px;height:15px;}
a.t2{background:#456;width:86px;height:15px;}
a.t3{background:#555;width:92px;height:15px;}
a.t4{background:#786;width:126px;height:15px;}

Or you can see it here at JSbin

One interesting thing worth noting is that no matter how many elements you add only the last one is wrapped.

This is happening because the p is not floated left. If you inspect the elements with for example firebug, you will see that the wrapper div.bottom has the exact width of it´s largest, unfloated, block level element, p.n, 378px.

If you float p.n as well, your problem is solved.

The problem is that floating the .bottom div left reduces its width and therefore everything it contains. Try changing div.section div {float: left} to div.bottom div {float:left}.

If you need to float everything, consider floating the external content right and/or specify fixed widths.