包含子元素的父容器

Question

我不知道为什么我的浮动没有清除，所以子容器会留在父容器内。

请看一下 此jsfiddle 明白我的意思。我想要的 .shadow-wrapper div，以包含它后面的所有其他元素。我怎样才能让父容器包含子元素？

Answer 1

使用这个。

.shadow-wrapper {
    background-color: red;
    clear: both;
    overflow:hidden;
}

要包围浮动元素，你可以使用以下任何一种方法。

float:left;
overflow:hidden;
display:table;
display:inline-block;
display:table-cell;

其他解决方案使用:after方法。

.shadow-wrapper:after {
    clear:both;
    content:" ";
    display:block;
}

正如你从这段代码中看到的，clear both不需要应用在所有地方，只需要应用在最后一个浮动的元素之后，因此我们可以使用after方法来模拟这种情况。

http:/jsfiddle.net7wja6

Answer 2

一种选择是增加 float:left; 到 .shadow-wrapper.

.shadow-wrapper {
    background-color: red;
    clear: both;
    float: left;
}

http:/jsfiddle.netkMGQC1。

Answer 3

使用浮动和清除的一般规则是，如果你浮动一个项目，你可能也应该浮动它的所有兄弟姐妹。如果这看起来有问题，你可以添加一个额外的div作为 最后一个孩子 并用该div清除这两个，这应该会解决你的问题。

<div class="wrapper">
  <div class="floating-thing">Hellllllooooo</div>
  <div class="non-floating-thing">Weeeeeeee</div>
  <div class="clearfix"></div>
</div>