html - float (在 Bootstrap 中)，为什么这样工作？

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(不 float )下方 实例化时，它只会停留在页面上与它不 float 时的位置一样高的位置。

来自 MDN(强调我的):

...when an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of it's containing box or another floated element

因此，元素从正常流中拉出并仅向左或向右移动。其他非 float 元素占用剩余的空间。

编辑:如果您需要 ul 上方的 h3，请将其 float 到左侧(如果需要，将它们都包含在内)，如下所示:

<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>