clear：両方とも動作していませんcss float

Question

私のフロートがクリアされていないので、子コンテナが親コンテナの内部に留まるようになっていないのはわかりません。

this jsfiddleをご覧ください。どういう意味ですか。私は.shadow-wrapper divがそれに続く他のすべての要素を包含したいと思っています。親コンテナに子要素を含むようにするにはどうすればよいですか？

Answer 1

使用この：あなたが使用することができますFLOATED要素を囲むために

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

このコードからわかるように、浮動小数点の最後の要素の後でのみ、どこにでも適用する必要はないため、これをシミュレートする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

山車を使用し、クリアのための一般的なルールは、1つのアイテムをフロートた場合、あなたはおそらく、あまりにもその兄弟のすべてをフロートすべきであるということです。問題が発生した場合は、最後の子として追加のdivを追加して、そのdivで両方の問題を解決して問題を解決する必要があります。

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