左サスペンション: float:left;
右サスペンション: float:right;
フロートの使用は非常に広いです。ここでは、コレクションの一般的な使用法を簡単に紹介します。
子要素が吊り下げられている場合、親要素が高さで崩壊します。この部分には、サスペンションのクリアが含まれます。次の章では、サスペンションのクリアの説明について説明します。
だから、ポイントに戻る、
最初の現象フロート=インラインブロックサスペンションは、インラインブロックモードになる4つのブロックのスタイルになります:下の図に示すように
<style> div {width:200px;高さ:200px;背景色:ピンク;ボーダー:1pxソリッドブラック。フロート:左; } </style><body> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div>2番目の現象:
下の図に示すように、最初の図は吊り下げられているため、2番目のブロック要素を最初のブロック要素の下に示します。
ただし、後者の要素は、4番目のブロック要素など、前の要素に越えませんが、3番目の要素は吊り下げられません。第4シーズンのブロック要素は、元の位置にとどまります。
<style> .first-one {float:left;背景色:緑; } .second-one {background-color:purple; }。 } .fourth-one {float:left;背景色:灰色; } div {width:200px;高さ:200px;背景色:ピンク;ボーダー:1pxソリッドブラック。フォントサイズ:30px; } </style><body> <div class = 1-one> </div> <div class = second-one> </div> <div class = third-one> </div> <div class = fourth-one> </div> <div class = fourth-one> </div> </body>3番目の現象:
すべての要素が浮かび、親要素の残りの幅がその列の子要素の配置をサポートするのに十分ではない場合、それは上位に接続されます
この記事は、https://segmentfault.com/a/1190000022669455から再現されています
要約しますこれは、HTMLフローティングフロートの使用に関する簡単な分析に関するこの記事の終わりです。関連するHTMLフローティングフロートコンテンツについては、wulin.comから以前の記事を検索するか、以下の関連記事を閲覧し続けてください。将来、誰もがwulin.comをサポートすることを願っています!