css - 包含子元素的父容器

Question

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

看看this jsfiddle明白我的意思。我希望 .shadow-wrapper div 包含其后的所有其他元素。如何让父容器包含子元素？

Answer 1

使用这个:

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

要包含 float 元素，您可以使用以下任何一种:

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

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

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

从这段代码可以看出，clear both 不需要应用到所有地方，只应用在最后一个 float 的元素之后，因此我们可以使用 after 方法来模拟这一点。

http://jsfiddle.net/7wja6/