オリジナルコード：
<HTML> <ヘッド> <タイトル>フロート</ TITLE> <スタイルタイプ= " テキスト/ cssの" > { リスト -style- タイプ：なし。 幅：800ピクセル; 背景：青; } { フロート：左; } </スタイル> </ head>の <身体> <UL> <LI> <IMG SRC = " 1.JPG " /> </ LI> <LI> <IMG SRC = " 2.JPG " /> </ LI> <LI> <IMG SRC = " 3.JPG " /> </ LI> <LI> <IMG SRC = " 4.JPG " /> </ LI> <LI> <IMG SRC = " 5.jpg " /> </ LI> <LI> <IMG SRC = " 6.jpg " /> </ LI> </ UL> </ BODY> </ HTML>
サブコンテンツのdivがありますが、親のdivの高さがゼロであるため、理由はフロートプロパティのセットの子要素。
ソリューション
図1は、素子高さ値を設定する高さを有しています。
{ リスト -style- タイプ：なし。 幅：800ピクセル; 背景：青; 高さ：300ピクセルによって; / * 追加の高さ属性* / }
2オーバーフロープロパティを使用すると、
オーバーフロープロパティを提供要素を含む、およびプロパティ値の自動または非表示を設定してもよいです。
{ リスト -style- タイプ：なし。 幅：800ピクセル; 背景：青; オーバーフロー：隠された; / * 追加オーバーフロー性、または非表示autoに設定してもよいです* / }
3空のdiv追加
これは、最後のFLOATED要素に空のdiv、DIVと同じレベルのフローティング要素を追加することであるが。二つの場所を変更するには、このアプローチは、一つはhtmlコードであり、他方はdiv要素にこの属性を追加するための明確な必要性です：
<HTML> <ヘッド> <タイトル>フロート</ TITLE> <スタイルタイプ= " テキスト/ cssの" > { リスト -style- タイプ：なし。 幅：800ピクセル; 背景：青; } { フロート：左; } / * 追加の空のdivのスタイル設定のために* / .clearDiv { クリア：両方を、 } </スタイル> </ head>の <身体> <UL> <LI> <IMG SRC = " 1.JPG " /> </ LI> <LI> <IMG SRC = " 2.JPG " /> </ LI> <LI> <IMG SRC = " 3.JPG " /> </ LI> <LI> <IMG SRC = " 4.JPG " /> </ LI> <LI> <IMG SRC = " 5.jpg " /> </ LI> <LI> <IMG SRC = " 6.jpg " /> </ LI> <divのクラス = " clearDiv " > </ div> <！ -新しく追加された空のdiv、それは同じレベルの、そして最後に浮かびます- > </ UL> </ BODY> </ HTML>
4擬似要素を使用して：後
、以下のように、このメソッド、クラス名は、.clearUl ULタグ本明細書中に提供されている場合、クラス名を含む第一の要素を追加します。
<HTML> <ヘッド> <タイトル>フロート</ TITLE> <スタイルタイプ= " テキスト/ cssの" > { リスト -style- タイプ：なし。 幅：800ピクセル; 背景：青; } { フロート：左; } / * 用途：擬似要素の後に* / .clearUl：後{ 内容："" ; 表示ブロック; クリア：両方を、 } </スタイル> </ head>の <身体> <ULのクラス = 「clearUl 」 > <！ -を含むタイプの周辺要素として配置- > <LI> <IMG SRC = " 1.JPG " /> </ LI> <LI> <IMG SRC = " 2.JPG " /> </ LI> <LI> <IMG SRC = " 3.JPG " /> </ LI> <LI> <IMG SRC = " 4.JPG " /> </ LI> <LI> <IMG SRC = " 5.jpg " /> </ LI> <LI> <IMG SRC = " 6.jpg " /> </ LI> </ UL> </ BODY> </ HTML>
中：コンテンツ属性は、このパターン生成手段は、それだけで非常に折り畳まれたタグULを除去するため、ここで生成されたコンテンツバックul要素含有量は、空の文字列で指定され、その結果、素子内部で使用された後それが表示させてはいけません。また、このスタイル、表示属性はクリア動作のみをブロックレベル要素に影響を与えるため、その原理は余白に要素を追加することで、明確な属性が動作しますので、彼のブロックを設定し、そこにあるクリーンアップを実行営業利益率は、要素内に動作しませんが、次の要素を下に浮動要素を作るためです。
子のdivの高さは、親のdivが軟化されたときに、私たちは、親へのdivの高さを設定しない場合は、別の態様では、親のdivが、私たちはどのくらいの子のdivの高さ、父とは無関係に、高さの値を追加するときdivの高さが設定値です。子のdivの高さは、親のdivの高さを超えると、余剰が非表示になります。
-------------------
オリジナルリンクします。https：//blog.csdn.net/cedar777/article/details/53886182