明确：两个不工作CSS浮动

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; 

使用其他解决方案：之后方法：

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

你可以从这个代码，处处应用都清楚需要犯规，仅是浮在最后一个元素之后，因此我们可以使用之后方法，模拟了这种见。

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>