CSSの基礎知識：float_html/css_WEB-ITnose

以前、CSS の基礎知識の位置づけに関する記事を書きましたが、その当時の私の float の理解はあまり正確ではなく、MOOC.com で多くの読者から指摘を受けました（原文は修正しました）。 、誤解を招く内容でしたら申し訳ありません）。ここで、float についてさらに詳しく学び、私の学習経験を皆さんと共有したいと思います。

フローティングの基礎知識

フローティングには、left（左フローティング）、right（右フローティング）、none（フローティングではない）、inherit（継承）の4つの属性があります。

float 要素を含むブロックは、最も近いブロックレベルの祖先です。

浮動要素は、その外側の境界が「包含ブロックの内側の境界」または「別の浮動要素の外側の境界」に触れるまで、左 (または右) にオフセットされます。

フローティング要素は標準のドキュメント フローの範囲外です。テキストおよび行レベルの要素は要素の周囲に回り込みますが、ブロック レベルの要素は影響を受けません。

非置換要素を浮動させる場合、要素の幅を宣言する必要があります。宣言しない場合、要素の幅は 0 になる傾向があります。

フローティング要素のマージン（余白）は、他の要素のマージンとマージされません。

フロートの詳細な研究

フロート要素の上端は、それを含むブロック内で以前に生成されたブロックレベル要素または行レベル要素の上端よりも高くすることはできません。

浮動要素は互いに重なり合うことができません。浮動要素を水平方向に配置するのに十分なスペースがない場合、十分なスペースができるか、浮動要素がなくなるまで下に移動します。

浮動要素は、それを含むブロックの左、右、および上の境界をオーバーフローできませんが、下の境界のみをオーバーフローできます。 (浮動要素が下限境界をオーバーフローすると、一部のブラウザーは浮動要素を包含ブロックに含めることができるように、包含ブロックの高さを増加させます。その結果、大きな空白スペースが生じ、ブラウザーの互換性の問題が発生します。)

負の場合浮動要素にはマージンが設定されます。浮動要素はそれを含むブロックからオーバーフローしているように見えますが、実際には上記のルールに違反しません。

特殊なケースとして、浮動要素がそれを含むブロックよりも広い場合、浮動要素はオフセットの反対方向にオーバーフローします。

フローティングの悪影響

背景を表示できない

枠線を引き伸ばすことができない

余白を正しく表示できない

フローティングをクリアする方法

.clear-float1{ content: “”; display: block; clear: both; }/* 方法1，当父包含块缩成一条时无效 */.clear-float2{ overflow:hidden; width:100%; }/* 方法2，overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容，从而实现了清除浮动。 */.clear-float3{ overflow: auto; zoom: 1; }/* 方法3，zoom是在处理兼容性问题，hidden和auto都能清除浮动，据说auto对seo更友好 */

参考資料

「CSS決定版ガイド」 - 第10章フローティングそして位置決め

CSSの基礎知識位置、ブロックレベルの要素と行レベルの要素を理解する、位置決めの基礎知識

非置換要素と置換要素

KB011: Floats

KB008: ブロックを含む

3つの方法のまとめCSS のフローティングフロートをクリアするには

皆さん、Shi Jiajie のブログに来て私とコミュニケーションを取り、貴重な提案をここに残してください。