div+css クリア float_html/css_WEB-ITnose

要素にフローティング属性がある場合、その親要素以降の要素に影響します。
フローティングの影響はフローティングを解除することで解決できます。

Float Clear(clear):

Value:
none: デフォルト値。浮動オブジェクトは両側で許可されます。
left: 浮動オブジェクトは左側で許可されません。
right: 浮動オブジェクトは右側で許可されません。

フロートをクリアする方法:

1. 追加のラベル メソッド
W3C では、コンテナの最後に「clear:both」要素を追加することを推奨しています
読み込みを容易にするために、コンテナをその高さに強制的に適応させます。すべての float 要素を削除します。
<div id="main">
<div id="left"></div>
<div id="right"></div>
<div class=" clear"></div>
</div>
<div id="footer"></div>

.clear{clear:both;}

2. 親にオーバーフローを追加しますelement: hidden;

注: 子要素が位置決めレイアウトを使用する場合、実装は困難になります。

3. メソッド

の後に疑似オブジェクトを使用してクラスを定義し、浮動要素の影響を制御するために疑似オブジェクトを使用します。
インターネット上で最も人気のあるクリア フローティング コード:
.clearFix:after{
clear:both;
display:block;
Visibility:hidden;
height:0;
line-height:0;
content:'';

}

.clearFix{zoom:1;} /*ie6/7 互換性の問題の解決*/

CSS オーバーフローの使用
オブジェクトのコンテンツが指定された高さと幅を超えた場合にコンテンツを管理する方法。
overflow:visible [デフォルト値、コンテンツを切り取ったりスクロールバーを追加しません]
auto [必要に応じてオブジェクトのコンテンツを切り取ったり、スクロールバーを追加したりします]
hidden [オブジェクトのサイズを超えるコンテンツを表示しません]
scroll [常にスクロール バーを表示する]

zoom 属性: IE コアを搭載したブラウザのみがズーム率をサポートします。

オブジェクトのズーム率を設定または取得します。
構文: 通常 [デフォルト値、オブジェクトの実際のサイズを使用]; 数値 [パーセンテージ | 符号なし浮動小数点数。浮動小数点実数
が1.0またはパーセンテージが100%の場合、この属性の通常の値に相当します
zoom:1はie6の高さ適応の問題を解決します。