前の親要素の高さを設定します。注：エンタープライズ開発では、できる場合は高さを書かないでください。
<！doctype html> <html lang = en> <head> <meta charset = utf-8> <title> d131_clearfloat </title> <style> .smallbox1 {width：100px;高さ：100px;背景色：赤;ボーラー：3pxソリッドブラック。マージン：5px; float：右;} .smallbox2 {width：100px;高さ：100px;背景色：赤;ボーラー：3pxソリッドブラック。マージン：5px;} .smallbox3 {width：100px;背景色：赤;ボーラー：3pxソリッドブラック。マージン：5px;} .smallbox3 {width：100px;高さ：100px;背景色：赤;ボーラー：3pxソリッドブラック。マージン：5px;} .smallbox4 {width：100px;高さ：100px;背景色：赤;ボーラー：3pxソリッドブラック。マージン：5px;} .smallbox5 {width：100px;高さ：100px;背景色：赤;ボーラー：3pxソリッドブラック。マージン：5px;} .smallbox6 {width：100px;高さ：100px;背景色：赤;ボディ：3pxソリッドブラック。マージン：5px;} .bigbox1、.bigbox2 { /*width：400px;* / /*width：400px;* / background-color：green;ボーダー：3pxブラックソリッド。 }</style></head><body><div class=bigbox1> <div class=smallbox1></div> <div class=smallbox2></div> <div class=smallbox3></div></div><div class=bigbox2> <div class=smallbox4></div> <div class=smallbox5></div> <div class=smallbox2> <div class=smallbox4></div> <div class = smallbox5> </div> <div class = smallbox6> </div> </div> </body> </html> 2。フロートをクリアする2番目の方法次の属性に明確な属性を追加します
明確な属性は値を取得します。
なし：デフォルト値は、浮動要素のソートルールに従ってソートされ、左フロートを見つけるために左フロート、右フロートを見つけるために右フロートを見つける）
左：正面に左浮遊要素を探しないでください
右：正面に正しい浮動要素を探しないでください
両方：正面に左浮遊要素と浮遊要素を探しないでください
たとえば、大きなボックスの幅と高さを設定するのではなく、小さなボックスは大きなボックスをサポートしますが、このために2つの大きなボックスが並んでいます。
.smallbox1 {width：100px;高さ：100px;フロート：左;背景色：赤;境界線：2pxソリッドブラック。 } .smallbox2 {width：100px;高さ：100px;フロート：左;背景色：赤;境界線：2pxソリッドブラック。 } .smallbox3 {width：100px;高さ：100px;フロート：左;背景色：青;境界線：2pxソリッドブラック。 } .smallbox4 {width：100px;高さ：100px;フロート：左;背景色：青;境界線：2pxソリッドブラック。 } </style> </head> <body> <div class = bigbox1> <div class = smallbox1> </div> <div class = smallbox2> </div> </div> <div class = bigbox2> <div class = smallbox3> </div> <div class = smallbox4> </div> </div> </body>3番目の小さなボックスのクリア属性を使用して、新しいライン（4番目のラインは必要ありません。3番目のラインが4番目のボックスの横にあるため、4番目のラインは必要ありません）を使用し、コードを変更するには3番目の小さなボックスのコードのみが必要です。
.smallbox3 {clear：left;幅：100px;高さ：100px;フロート：左;背景色：青;境界線：2pxソリッドブラック。 }注：マージン属性の有効期限が切れており、次回は期限切れにならない方法について説明します。
3。ソースコード：d131_clearfloat.html
d132_clearattribute.html
住所：
https://github.com/ruigege66/html_learning/blob/master/d131_clearfloat.html
https://github.com/ruigege66/html_learning/blob/master/d132_clearattribute.html
要約します上記は、編集者が紹介するフローティングHTMLをクリアする2つの方法です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！
この記事が役立つと思われる場合は、再版してください。ソースを示してください、ありがとう！