如何讓我的包裝按鈕的DIV使用一些垂直空間？

Question

我有以下HTML，其中浮左和浮右類做到這一點：

<div class="block-footer"> 
    <button class="medium float-left">A</button> 
    <button class="medium float-left">A</button> 
    <button class="medium float-left">A</button> 
    <button class="medium float-right">A</button> 
    <button class="medium float-right">A</button> 
</div> 

這工作，但我的div似乎沒有佔據的垂直空間，這對接下來的一個問題。當我這樣做：

<div class="block-footer"> 
    <button class="medium float-left">A</button> 
    <button class="medium float-left">A</button> 
    <button class="medium float-left">A</button> 
    <button class="medium float-right">A</button> 
    <button class="medium">A</button> 
</div> 

然後DIV佔據空間。

那麼我怎樣才能讓一些按鈕浮動到左側，一些到右側，仍然有DIV使用一些垂直空間？

Answer 1

你需要在你的容器div上設置overflow:auto。

jsFiddle example

這是由於block formatting context。查看關於this question如何工作的答案。本質上，浮動就是這樣做的，浮動並且像從文檔流中移除一樣，這會導致容器div崩潰。