float元素生成順序的差異

用下面的html，我預期得到左右各有一個button(float div)，剩下空間是status bar(div)
結果卻會是：

<div>
    <div class="pull-left btn">Button</div>    
    <div class="alert alert-info">Status bar</div>
    <div class="pull-right btn">Button</div>    
</div>

Button

Status bar

Button

這是由於第二個div在生成的時候就先將其父元素剩下的空間填滿了(block元素的特性)
第三個float div則被擠到了下面

所以將生成順序調整一下，讓float div先生成，這樣就不會被擠下去了

<div>
    <div class="pull-left btn">Button</div>    
    <div class="pull-right btn">Button</div>
    <div class="alert alert-info">Status bar</div>
</div>

Button

Button

Status bar

不過div的背景依舊會填滿父元素的空間，只有content會跟著float元素排版
此時CSS加上overflow，設成hidden或auto就可以正確的調整背景大小到float元素占據後剩下的空間了

<div>
    <div class="pull-left btn">Button</div>    
    <div class="pull-right btn">Button</div>
    <div class="alert alert-info" style="overflow:hidden;">Status bar</div>
</div>

Button

Button

Status bar

延伸閱讀：
All about floats