これはよく知られているモデルは、フローティング、視覚フォーマットモデルです。フローティングフレームは（すなわち：フロート：左;フロート：右）を動き回ることができ、その外縁がボックスまたは他の遭遇フローティングフレームのエッジを含むまで。通常のフローは、ドキュメント内のボックスを浮動されていないので、ボックス内の文書のブロックボックス通常のストリームは、フローティングが存在のように動作しません。
.wrapper{
border:5px solid #000;
/*height:300px;*/
}
ul{
margin:0;
padding:0;
/*height:300px;*/
border:1px solid #f00;
/*float:left;*/
}
li{
float:left;
height:100px;
list-style:none;
padding:5px 10px;
}
クリアフロート法：
ボックス内に漂っボックスの外側のラインを防ぐために、我々は明確な財産ラインボックスのアプリケーションでこれらの要素を含める必要があります。クリア属性値は境界が次のフレームに浮いてはならないことを示し、右、両方、またはどれも、残っていないことがあります。素子を清掃するとき、要素ブラウザは垂直フレーム要素の上部縁下までフロートすることを、十分にマージンを追加します。
ドキュメントフローのうちフロートは、周囲の要素に影響を与えません。しかし、クリーニング要素は、実際に左側の縦のスペースの前に浮かんでいます。
方法a：要素を浮動後に透明性を有するブロック要素を追加します。
.clear{
clear:both;
}
これが私たちの所望の効果を達成しますが、不要なコードを追加するために、ラベルコードには意味がありません。
方法2：擬似クラスセレクター：後
方法3：使用してオーバーフロー：自動車の隠されたまたは副作用は、自動的に浮動要素内の任意の苦味をクリーンアップ。ブロック浮動要素に配置された親属性オーバーフロー：隠されたまたは自動。
これは有用な元素の洗浄方法は、余分なマークアップを追加する必要はありませんです。この方法は、その性能に影響を与えますので、オーバーフローボックスセットの、すべての場合には適していません。具体的には、このプロセスは、スクロールバーを作成するか、いくつかのケースでは、次回のコンテンツを遮断します。
方法4：子コンテンツが固定されている場合は、適切な高さの親要素に提供することができます。
この記事はで再現された：フロートフロートについて