Поплавки (в бутстрапе), почему это работает так?

Question

Таким образом, этот код работает фантастически:

<div class="container"> 
    <header class="page-header"> 
    <ul class="nav nav-pills pull-right"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About Ribbit</a></li> 
     <li><a href="#">Treehouse</a></li> 
    </ul> 
    <h3>Ribbit</h3> 
    </header> 

    <div> 
    <h1>Self-destructing message app</h1> 
    <p>Learn how to build this fun little app by signing up for a Treehouse account today! We'll teach you how to build both apps from scratch!</p> 
    <p> 
     <a href="#">Download the app</a> 
     <a href="#" >Text me the link</a> 
    </p> 
    </div> 

    <div> 
    <p>&copy; 2013 Ribbit - By Treehouse Island, Inc.</p> 
    </div> 
</div> 

Но если я поставил <h3>Ribbit</h3> над <ul class="nav nav-pills pull-right"> это выглядит так. Почему это происходит? Может ли кто-нибудь объяснить мне?

<header class="page-header"> 
    <h3>Ribbit</h3> 
    <ul class="nav nav-pills pull-right"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About Ribbit</a></li> 
     <li><a href="#">Treehouse</a></li> 
    </ul> 
    </header> 

Answer 1

Когда ul приходит до h3, он плавает вправо и h3 делает комнату для него, перемещаясь в пространстве ul иначе занимаемого бы. Когда он создает подh3 (который не плавает), он остается только на странице вверх, как если бы он не был плавающим.

От MDN (курсив мой):

... когда элемент плавали его вынимают из нормального потока документа. Она сдвигается к левой или правой, пока он не коснется края это, содержащее коробку или другой элемент плавал

Таким образом, элементы извлекается из нормального потока и сдвинутый только влево или вправо. Другие неплывающие элементы потребляют пространство, которое остается.

EDIT: Если вам нужна h3 над ul, плывут влево (и содержать их обоих, если это необходимо), например, так:

<header class="page-header clearfix"> 
    <h3 class="pull-left">Ribbit</h3> 
    <ul class="nav nav-pills pull-right"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About Ribbit</a></li> 
    <li><a href="#">Treehouse</a></li> 
    </ul> 
</header>