如何让div高度根据内部内容自适应？

Question

我有嵌套的

元素，大多数都是使用float:left; display:block;属性，像这样：

<div class="container" style="display:block;">
    <div style="float:left; display:block; height:100px;">
    <div style="float:left; display:block; height:100px;">
</div>

我希望

容器可以不设置高度而自动增大。目前它是一条平线。
我该如何设置内部的< div >，以使容器具有高度？

简短概述：目前我可以正常看到内部的2个< div >，但容器是一个平的< div >（没有高度）。
我该如何给它一个高度？

- Emmett

Answer 1

你有两个选项：

<div class="container" style="overflow:hidden">
    <div style="float:left; height:100px;">
    <div style="float:left; height:100px;">
</div>

或者

<div class="container">
    <div style="float:left; height:100px;">
    <div style="float:left; height:100px;">
    <div style="clear:left">
</div>

注意，overflow:hidden元素会环绕浮动的内部元素。或者，您可以使用一个元素来清除浮动，这也将使周围的元素包含其内容。

另一个提示：您不必声明div为display:block。在HTML中，基本上有两种类型的元素，block和inline。Div默认是block类型。

- Andre Pena

---

请注意，overflow属性的值可以是任何适用的值（auto、hidden、scroll、visible）。 - Bram Vanroy

此外，任何浮动元素都会变成块级元素。 - bfavaretto

Answer 2

将overflow:hidden添加到该DIV中。

- casraf

---

将外部div的高度自动设置为其浮动内容的高度 - Paul Sullivan

你也可以将容器向左浮动或在末尾添加一个清除元素（虽然我建议使用clearfix解决方案）。 - Paul Sullivan

Overflow: hidden 可能会导致问题，当你不想隐藏溢出内容时（例如，如果你有一个弹出框）。Clearfix 也是一个不错的选择。 - Scott Simpson

通常使用浮点数是不会发生溢出的，因为您希望它适合，除非添加了 max-height 或其他内容，在这种情况下，overflow:auto 就可以解决问题。 - casraf