CSSの基礎知識floatを詳しく紹介

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

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

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

浮動小数点要素を含むブロックは、その最も近いブロックレベルの祖先です。

フローティング要素は、その外側の境界が「包含ブロックの内側の境界」または「別のフローティング要素の外側の境界」に触れるまで、左（または右）にオフセットされます。

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

非置換要素をフロート化するには、要素の幅を宣言する必要があります。宣言しない場合、要素の幅は 0 になる傾向があります。

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

float の詳細な研究

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

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

浮動要素は、含まれるブロックの左、右、および上の境界をオーバーフローできませんが、下の境界のみをオーバーフローできます。 (フローティング要素が下限境界をオーバーフローすると、一部のブラウザーはフローティング要素を包含ブロックに含めることができるように、包含ブロックの高さを増加させます。その結果、大きな空白スペースが生じ、ブラウザーの互換性の問題が発生します。)浮動要素は負のマージンで設定されています。浮動要素は包含ブロックからオーバーフローしているように見えますが、実際には上記のルールに違反しません。

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

フローティングの悪影響

背景を表示できない

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

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

フローティングを解除する方法

/* 方法1，当父包含块缩成一条时无效 */

.clear-float2{ overflow:hidden; width:100%; }   
/* 方法2，overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容，从而实现了清除浮动。 */

.clear-float3{ overflow: auto; zoom: 1; }   
/* 方法3，zoom是在处理兼容性问题，hidden和auto都能清除浮动，据说auto对seo更友好 */

以上のCSSの基礎やfloatに関する知識の詳細な解説は編集者が共有した内容ですので、皆様の参考になれば幸いです、またPHP中国語サイトを皆様にも応援していただければ幸いです。

以上がCSSの基礎知識floatを詳しく紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。