フロートプロパティ設定：
1、左要素は左にフロート
2、右要素は右にフロート
3、なし-デフォルト値。要素は浮きません。
概要：
floatを追加した人はすべて標準から削除され、次のコンテンツが上部に表示されます。
トップアップ後も適応外使用の内容が変わらない場合、適応外使用は前者（ドラッグされたラベルの内容）で覆われている可能性があります。
位置を変えないと、本来あるべき場所に表示されます。
1.フロートクラッシュ
親要素に高さが設定されていない場合、子要素をフローティング（フロート）親レベルのブロックレベル要素の高さに設定します。
破壊が発生します（破壊、崩壊とも呼ばれます）
div->設定なし高さと幅の場合：
高さ：div内のコンテンツの高さ
幅：親レベルの幅
2.フロートラッパーラッパーの
ラッパー性：divがfloatに設定されている場合、幅はコンテンツの幅に適応します。
ブロックレベル要素のデフォルトの幅は親要素の幅であり、divはfloatに設定されて、折り返し特性を生成します。
行レベル要素には、より多くのブロックレベル要素の折り返し（ベースライン）があります。
解決策：
1）変換imgからブロックレベルの要素vertical-align：bottom
2）垂直方向の配置：下部の配置;行レベルの要素からブロックレベルの要素
<html>
<head>
<style type="text/css">
div{
background-color: yellow;
float: left;
}
img{
vertical-align: bottom;
}
</style>
</head>
<body>
<div>
<img src="image/3.jpg"/>
</div>
</body>
</html>
3. floatを使用してグラフィックとテキストを混合します。float
の本来の設計意図->グラフィックとテキストの混合（周囲モード）を実現するために、テキストと長方形の領域を円形に配置できます。
たとえば、テクノロジーが入ると->製品リストを並べて表示するために使用されます
<html>
<head>
<style type="text/css">
div{
background-color: yellow;
float: left;
}
img{
vertical-align: bottom;
}
p{
text-align: justify;
line-height: 20px;
}
</style>
</head>
<body>
<div>
<img src="image/3.jpg"/>
</div>
<p>
包裹性：当div设置浮动后 宽度会自适应其内容的宽度。
块级元素默认宽度就是父级元素的宽度，div设置为float 产生包裹特性
行级元素都会出现块级元素包裹多出（基准线）
解决：
1）将img转换为块级元素 vertical-align:botom
2）垂直对齐方式：底部对齐；行级元素转块级元素
</p>
</body>
</html>
<html>
<head>
<style type="text/css">
div{
background-color: white;
float: left;
}
img{
vertical-align: bottom;
float: left;
}
p{
text-align: justify;
line-height: 20px;
}
</style>
</head>
<body>
<div>
<img src="image/3.jpg"/>
<p>
包裹性：当div设置浮动后 宽度会自适应其内容的宽度。
块级元素默认宽度就是父级元素的宽度，div设置为float 产生包裹特性
行级元素都会出现块级元素包裹多出（基准线）
解决：
1）将img转换为块级元素 vertical-align:botom
2）垂直对齐方式：底部对齐；行级元素转块级元素
</p>
</div>
</body>
</html>
4.フロートをクリアするためのフロート
1.フロートをクリアする必要がある理由：
1。親要素が「高さの崩壊」を防ぐため
2.外側のコンテナーのサイズが必須の場合、それほど柔軟ではありません、および高さは自動調整されません
（将来のデータのほとんどはバックグラウンドから取得されるため、コンテンツとバージョンに一貫性がありません）
3。特定の要素から開始して、フローティング効果は不要になります。
方法1：
フローティングコードをクリア–>クリア：両方（右と左）; –>要素の前にフロートをクリアすることを意味します。要素の後にフロートがある場合、このクリアフローティングコードの影響を受けません。
clear：left–>左のフローティングを
クリアclear：right–>右のフローティング
メソッド2
をクリア： divをクリアしないようにフローティングdivをクリアするコードを追加
#clearDiv {clear：both;}
top margin– > top：10px ;位置：相対;（マージンを設定するときは位置に注意してください）
方法3 :(現在、いくつかの大規模なWebサイトが一般的な方法です。Webサイトのコンテンツが多い場合、予期しない問題を防ぐことができます）
:: after– > pseudo-element
#clearDiv :: after { content： ""; –> clearDivにコンテンツが必要なため、コロンは空ですが、ブラウザには表示されません。表示：非表示; –>コンテンツを非表示にする（一部の誤操作によってclearDivに余分なコンテンツが発生するのを防ぐため。クレンジングと変形）
height：0px; –>行の高さをデフォルトに戻します。
display; block; –>ブロック表示、コンテンツをクロスレベル要素に変換します
clear：both;
}
特にIEブラウザーがフローティングメソッドをクリアする場合：
#clearDiv {zoom：1;} zoom–
> ieブラウザー専用、関数–>ページ内のオブジェクトを再読み込みして再計算します。再レンダリング効果を再生するため。
余白の重なりやフローティングをクリアできないなど、IEブラウザのいくつかのバグを解決することは非常に効果的です。