web-dev-qa-db-ja.com

クリア：両方とも機能していないcssフロート

子コンテナが親コンテナ内にとどまるようにフロートがクリアされない理由がわかりません。

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

csscss-floatclear
10
Dude

これを使って：

.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/

13
user1721135

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

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

1つのオプションは、float:left;を.shadow-wrapperに追加することです。

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

http://jsfiddle.net/kMGQC/1/

0
Chris Bier