フローティングコンセプト
ブロックレベルの要素は、ドキュメントフローの同じ行に複数の要素を表示することはできません。要素をインライン要素またはインラインブロック要素に変換すると、要素間にギャップが表示されます。レイアウト効果を実現するために、float（float）が使用されます。フローティングボックスは、そのエッジが親ボックスの境界または別のフローティング要素の境界に接触するまで、左または右に移動できます。フローティングにより、要素はドキュメントフロー（標準フロー）を離れます。つまり、要素はドキュメントフロー内の位置を占有しなくなります。
- 図に示すように、ボックス1を右にフロートさせると、ドキュメントフローを離れ、右端が収容ボックスの右端に接触するまで右に移動します。
- 図に示すように、ボックス1が左に浮くと、ドキュメントフローから抜け出し、左端が収容ボックスの左端に接触するまで左に移動します。ドキュメントフローに含まれなくなったため、スペースを占有せず、実際にはボックス2を覆い、ボックス2が表示されなくなります。
- 図に示すように、格納フレームが狭すぎて水平に配置された3つのフローティング要素を収容できない場合、他のフローティングブロックは十分なスペースができるまで下に移動します。フローティング要素の高さが十分でない場合、それらが下に移動するときに他の要素によって「スタック」する可能性があります。
- 要素がフローティングの場合、要素は、上端が前の要素（フローティング要素または標準フロー要素）の下端に接触するか、前のフローティング要素の上端と位置合わせされるまで上下に移動します。左右に移動します。それが他の要素の端に触れるか、端に要素を含むまで。写真が示すように。
フローティング特性
- フローティング要素はドキュメントフローから外れます（適応外）。
- フローティング要素が一列に表示され、上部に配置されます。
- フローティング要素は、インライン要素の特性を持ちます。
- フローティング要素は、次の標準ストリームにのみ影響し、前の標準ストリームには影響しません。
- 表示モードの任意の要素をfloatに設定できます。
- 要素はフローティング属性で設定されます。理論的には、残りの兄弟要素もフローティングである必要があります（兄弟要素に影響を与えるレイアウトの問題を防ぐため）。
兄弟要素が同時にフロートするように設定されていない場合によく発生する問題は次のとおりです。
- 後ろの要素は前のフローティング要素で覆われています。
- 次の浮動要素は、前の兄弟要素が浮動していないため、同じ行に表示できません。
クリアフロート
高い崩壊の問題
多くの場合、親要素は高さを直接指定しないため（高さはコンテンツによって引き伸ばされます）、ドキュメントフローを離れた後、内部の子要素はスペースを占有しなくなります。親要素のコンテンツの高さが変更（折りたたまれ）します。これは、親要素の下のドキュメントフローボックスの位置に影響します。
高崩壊の問題を解決する
高さの崩壊の問題を解決するために、フロートをクリアすることの本質は、親要素の高さに対するフローティング要素の影響をクリアすることです。親要素ボックス自体に高さがある場合は、フロートをクリアする必要はありません。この方法は、親要素の子要素にclear属性を追加することです。
selector {
clear:left;
}
/*清除该元素左边浮动元素对父元素的高度的影响*/
/*可以设定的值还有right、both*/
高崩壊の問題を解決するための通常の戦略は、フロートを閉じることです。つまり、フロートの効果は親要素の内側に限定されます。
- フローティング要素の下に空のブロックレベルのラベルを追加し、それに明確なフローティングスタイルを追加します
<div style="clear:both">
</ div>
<!--但是添加了无意义的标签，结构性较差。-->
- 親要素にoverflow：hidden \ auto \ scroll属性を追加します。コードは簡潔ですが、オーバーフロー部分を表示できないという問題があります。
- after疑似要素を親要素に追加します。
.clearfix:after {
content:"";
display:block;
clear:both;
height:0;
visibility:hidden;
}
.clearfix {
/*ie6、ie7专用*/
*zoom:1;
}
- 親要素に二重の疑似要素を追加します。
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
/*ie6、ie7专用*/
*zoom:1;
}
注：floatをクリアすると、親要素の内部の子要素（浮動要素の後ろにある要素）に対する内部の浮動要素の影響ではなく、その下の要素に対する親要素の高さの折りたたみの影響が解決されます。通常、これら2つの効果の違いに注意を払う必要があります。
ほこり/ 2020/12/20