包含子元素的父容器

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.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>