Question

我遇到了CSS问题。情况如下：

我有这种结构：

#Block {
  background-color: #FF0000;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 30px;
  padding-right: 30px;
}
[class="Element"] {
  width: 33.33%;
  background-color: #0000FF;
  float: left;
}

<div id="Block">
  <div class="Element">
    Some contents.
  </div>
  <div class="Element">
    Some more contents.
  </div>
  <div class="Element">
    Still some more contents.
  </div>
</div>

我期待在我的3个元素（蓝色）后面看到一个红色框，包含它们。

但我只在元素后面看到一个红色矩形，但尺寸错误，更准确地说不够高。似乎Block部分与其他部分完全无关。

我做错了什么？

Answer 1

使用以下方法清除 float ：

#Block:after{
  content:'';
  display:block;
  clear:both;
}

我想现在看起来还不错。

为什么会这样？

如果包含块具有浮动元素，那么只有在清除 浮动上下文时才会获得高度。（参见an example here）

如果其中任何一个未浮动，则包含块将获取此元素的高度。

您还可以在包含块上使用overflow: hidden来获得相同的效果。

#Block { background-color: #FF0000; padding-top: 30px; padding-bottom: 30px; padding-left: 30px; padding-right: 30px; } [class="Element"] { width: 33.33%; background-color: #0000FF; float: left; } #Block:after{ content:''; display:block; clear:both; }

<div id="Block"> <div class="Element"> Some contents. </div> <div class="Element"> Some more contents. </div> <div class="Element"> Still some more contents. </div> </div>

DIV没有像预期的那样在另一个里面装

1 个答案: