フローティングレイアウトとは：
要素が浮くと、その外縁がその要素を含むフレームまたは別の浮いている要素の境界に触れるまで、要素は左または右に移動できます。
要素がフロートした後、通常のドキュメントフローから逸脱するため、ドキュメントの通常のフローのフレームは、フローティング要素が存在しないかのように表示されます。
フローティングレイアウトの利点：
これの利点は、画像が混合されたときにテキストを画像にうまく巻き付けることができることです。また、要素がフロートする場合、幅や高さなどのブロックレベルの要素のプロパティがいくつかありますが、それでもインラインブロックとは異なります。1つ目は水平方向の並べ替えに関するもので、フロートは方向とインラインを設定できます。 -blockの方向が修正されました。インラインブロックを使用すると、空白が表示されることがあるという別の問題があります。
フローティングレイアウトのデメリット：
最も明らかな欠点は、フローティング要素がドキュメントフローを離れると、親要素をサポートできなくなり、親要素の高さが崩壊することです。
フロートをクリアする方法
1.タグを追加します
<div class="parent">
//添加额外标签并且添加clear属性
<div style="clear:both"></div>
//也可以加一个br标签
</div>2.オーバーフロー属性を親に追加するか、高さを設定します
<div class="parent" style="overflow:hidden">//auto 也可以
//将父元素的overflow设置为hidden
<div class="f"></div>
</div>3.フロートをクリアするための疑似タイプセレクターを作成します（推奨）
//在css中添加:after伪元素
.parent:after{
/* 设置添加子元素的内容是空 */
content: '';
/* 设置添加子元素为块级元素 */
display: block;
/* 设置添加的子元素的高度0 */
height: 0;
/* 设置添加子元素看不见 */
visibility: hidden;
/* 设置clear：both */
clear: both;
}
<div class="parent">
<div class="f"></div>
</div>