html - 如何让包含按钮的 DIV 使用一些垂直空间？

Question

我有以下 HTML，其中 float-left 和 float-right 类就是这样做的:

<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 的答案关于它是如何工作的。本质上， float 就是这样做的， float ，并且表现得好像它们已从文档流中删除，这会导致容器 div 折叠。