css - 包含子元素的父容器

Question

我不确定为什么我的浮动没有清除，以便子容器将留在父容器内。

看看这个 jsfiddle看看我的意思。我希望.shadow-wrapperdiv 包含它后面的所有其他元素。如何让父容器包含子元素？

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 不需要在任何地方都应用，只需要在最后一个浮动元素之后，因此我们可以使用 after 方法来模拟这一点。

http://jsfiddle.net/7wja6/

Answer 2

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

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

http://jsfiddle.net/kMGQC/1/

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>