Css 包含子元素的父容器

我不知道为什么我的浮动没有清除，这样子容器就会留在父容器中

---

看看我的意思。我希望

.shadowwrapper

div包含它后面的所有其他元素。如何让父容器包含子元素？

一个选项是添加

float:left到
。卷影包装器

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

使用以下方法：

.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方法来模拟这一点

使用浮动和清除的一般规则是，如果浮动一个项目，可能也应该浮动其所有同级项目。如果这似乎有问题，您可以添加一个额外的div作为最后一个子项，并用该div清除这两个div，这将解决您的问题

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


Hellllloooo
Weeeeeee