如何使包裹按钮的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的答案，了解其工作原理。从本质上讲，浮点数就是这样，浮动，并且就像它们从文档流中移除一样，这会导致容器div崩溃。