Question

我不知道为什么我的浮动没有清空，因此子容器将留在父容器中。

看看this 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;
}

从这些代码可以看出，清除两者并不需要在任何地方应用，只能在浮动的最后一个元素之后，因此我们可以使用模拟它的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>

明确：两个都不工作的CSS浮动

3 个答案: