css - DIVs, height and float

Question

I have float red divs on blue div like on picture

<div class="blue">
  <div style="height: 40px; float: left"></div>
  <div style="height: 40px; float: left"></div>
  <div style="height: 40px; float: left"></div>

  <div style="height: 40px; float: left"></div>
  <div style="height: 40px; float: left"></div>
  <div style="height: 40px; float: left"></div>
</div>

I want to do, so blue div have height on red DIVs. When I remove float it's OK.

Answer 1

您需要添加 display:table-cell; 或溢出：隐藏；到你的蓝色 div。这将为父母提供其孩子的高度。

演示

像这样：

.blue{
   overflow:hidden;
   //or
   //display:table-cell;
}

旁注 - 您的 div 在浮动时需要一个宽度。

您还可以选择使您的 div 带有蓝色类浮动。但这可能会导致您的文档中出现一些不需要的行为（如果 div 不应该浮动）。

Answer 2

只需浮动蓝色 div：

.blue{
   float: left;
}

然后它将扩展以达到其子项的高度。

如果浮动不是一个选项，我会设置display为inline-block使其行为方式与浮动元素相同。

.blue{
   display: inline-block;
}

参考：https ://developer.mozilla.org/en-US/docs/CSS/display

Answer 3

这是一个非常常见的问题，称为“clearfix”问题。更多信息可以在这里找到（例如）：Div rendering wrong in Firefox

简而言之，您应该.clearfix向父（蓝色）div 添加一个类，如下所示：

.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
    line-height: 0;
  }
&:after {
    clear: both;
}

这个是从 Twitter Bootsrap “借来的”，但是那里有很多替代品。对于它为什么以及如何工作，我建议使用谷歌搜索“clearfix”。

请注意，还有其他“修复”，例如使用inline blocks、添加overflow: hidden甚至显示为table-cell. 尽管它们可能在某些情况下工作，但它们几乎都有其他副作用，或者不是完全跨浏览器，因此应谨慎使用。

Answer 4

另一个在所有浏览器选项中不兼容但不需要 float:left 的选项

.blue{
    background-color:blue;
    overflow:hidden;
    width: 140px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.blue div{
    background-color:red;
    margin: 2.5px 0 2.5px 0;
    width:40px;
}

<div class="blue">
  <div style="height: 40px;"></div>
  <div style="height: 40px;"></div>
  <div style="height: 40px;"></div>

  <div style="height: 40px;"></div>
  <div style="height: 40px;"></div>
  <div style="height: 40px;"></div>
</div>

Answer 5

如果你需要一些干净和更有活力的东西，试试这个：

<div class="blue">
<div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div>
    <div></div>
    <div></div>
    <div></div>
</div>

和这个：

.blue {background-color: blue;text-align: center;display: inline-block;padding: 5px;}
.blue > div > div {background-color: red; width:100px; height: 50px; margin: 10px;display: inline-block;}

jsfiddle 上的示例