フローティングとは?

floatは「float」を表し、html/cssでレイアウトを整理するときに要素を右または左にシフトするプロパティです.floatを使用することで、ドキュメントの流れから抜け出し、柔軟な導入を実現できます.
最近は主にfloatよりも簡単なflex-boxが使われています.

float使用時の注意点

floatを適用する際に注意すべき点はposition:absolute;一緒に使用できません.absoluteを適用するオブジェクトはfloatプロパティを無視します.

float: left/right/none;

float: left;
float: left;
float: none;
floatにはleft、right、noneの3つのプロパティがあります.
既定値は左、右、右、オフセット要素なしです.

.img {
    width: 90px;
    height: 90px;
    float: left;
    margin: 10px;
}

このように画像上でfloat:left;与えると画像が左にずれ、テキストが画像を囲む形で表示されます.

clear

しかし、テキストが上のように画像を囲む形式ではなく、テキストを画像の下に置きたい場合は、どうすればいいのでしょうか.この場合に使用できるプロパティはclearです.
float要素の周囲をその方向に配置し、clearを使用すると、この領域からfloatは適用されません.
左にフローティングしたclear:leftをキャンセルします.
右にフローティングしたclear:right;
左、右のすべてのフローティングをキャンセルするclear:doth;
したがって、この場合、テキストを画像の下に配置したい場合は、テキストの左側に浮動するclear:leftをクリアします.使用します.

.img {
    width: 90px;
    height: 90px;
    float: left;
    margin: 10px;
}

.txt {
    clear: left;
}

clearfix

floatを使用すると、親要素がfloat要素の空間を反映できないため、レイアウトが破壊されるという問題が発生する可能性があります.この場合clearfixを使用して問題を解決できます.clearfixには4つの方法があります.

01.仮想要素：after使用

floatプロパティを適用する要素の親要素で使用する::clear:this;使用します.clear thatは左、右ともに適用されるので、thisをよく使っても構いません.

02.オーバーフローの使用

オーバーフロー親要素:hidden;またはオーバーフロー:auto;適用されます.hiddenの場合、オーバーフローした部分はカットされ、autoの場合、オーバーフローした部分はスクロールされます.hiddenの内容は遮断されるのでautoをお勧めします.

03.空のエンティティを作成してclearを適用する

1番とほぼ同じ方法で、アイラインを作って上にクリアを描きます.何の意味もない要素を追加するので、この方法よりも一つの方法をお勧めします.

04.親要素にフローティング

子どもなどの浮動を親に与える方法だ.これにより、親要素もfloatになり、inlineの性質が強調されるので、レイアウト時に注意してください.