CSSクリア・フロート

フロートを消す方法はいくつかあります：

float 要素の後の要素に clear 属性を追加することは推奨されません。余分な要素が追加され、意味不明な html 要素が大量に追加されます。 推奨されません；

<div class="container"> 
 <div class="item1">item1</div>
 <div class="item2">item2</div> 
 <div style="clear: both;"></div>
</div>

擬似要素の使用

<div class="container clearfix"> 
 <div class="item1">item1</div>
 <div class="item2">item2</div> 
 <div style="clear: both;"></div>
</div>
// モダンブラウザのclearfixスキーム、IE6/7はサポートしていない
.clearfix:after {
 content: "020";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden; 
}
.clearfix {
 /* hasLayoutをトリガーする*/
 zoom: 1;
}

擬似要素の使用、推奨の前後

// すべてのブラウザで推奨されるclearfixスキーム
// IE6/7をサポートするためにズームを導入した。
// また:beforeモダンブラウザでのマージン折り返しの問題を解決する。
.clearfix:before,
.clearfix:after {
 display: table;
 content: " ";
}
.clearfix:after {
 clear: both;
}
.clearfix{
 *zoom: 1;
}

親要素のowerflow属性を変更しますが、一部のデータが無線で表示される可能性があるため、BFCをトリガーすることはお勧めしません。

<div class="container"> 
 <div class="item1">item1</div>
 <div class="item2">item2</div> 
 <div style="clear: both;"></div>
</div>
.container { overflow:auto|hidden;
 *zoom: 1; // IE6/7をサポートするためにズームを導入した。
}

浮動要素のコンテナに浮動要素を追加 推奨されません。

<div class="container"> 
 <div class="item1">item1</div>
 <div class="item2">item2</div> 
 <div style="clear: both;"></div>
</div>
.container { 
 float: left|right
}

上記の例から、フロートをクリアする方法は2つのカテゴリーに分けられることがわかります：

• 一つはclear属性の使用で、これは要素を閉じるためにフローティング要素の末尾にclear: both属性を持つ空のdivを追加することからなります。 実際、:after擬似要素の使用も、clear: both属性を持つ要素の末尾にドットを持つ要素を追加することで実現されます。

• もう1つは、フローティング要素の親要素のBFCをトリガーして、親要素がフローティング要素を含むことができるようにすることです。