CSS レイアウト シリーズ-float float_html/css_WEB-ITnose

浅いものから深いものまで、一連のレイアウトについて説明します。まず、いくつかの基本的な属性理論を説明し、次に例と理論を通じてそれらをわかりやすく説明します。誰もが一緒に議論し、学び、奮闘することを歓迎します。早速、公式 Web サイトにアクセスして、float の定義がどのように説明されているかを見てみましょう。

正式な定義:

float 属性は、要素がどの方向に浮動するかを定義します。歴史的に、このプロパティは常に画像に適用され、テキストが画像の周りを回り込むようにしていましたが、CSS では任意の要素をフローティングにすることができます。フロート要素は、要素のタイプに関係なく、ブロック レベルのボックスを作成します。非置換要素が浮動している場合は、明示的な幅が指定されます。それ以外の場合は、可能な限り狭くなります。行上に浮動要素用のスペースがほとんどない場合、要素は次の行にジャンプし、このプロセスは行に十分なスペースができるまで継続します。

これらの定義を見ると、理解できたように思えますが、実際に使ってみると、まだ理解できないこともあります。それでは、その公式の定義とその特徴を要約してみましょう:

フローティングは主に要素の配置方向を変更し、通常の流れから脱却します。値の範囲は left、right、none (非浮動) です。

浮動要素が非浮動ブロックレベル要素と重なる場合、浮動要素は最上位に配置されます。

指定した要素がフローティングの場合、要素はブロック内特性を持ち、幅はできるだけ狭くなります。

フローティング要素の方向を指定すると、フローティング要素は停止します。親要素の境界に達するとフローティングになります。または、別のフローティング要素の境界に遭遇すると、フローティングも停止します。

フローティング要素が指定されている場合、後続の非フローティングブロックレベル要素はフローティング要素に続きます。要素の幅を自動的に埋めます。

フローティングの場合 行にフローティング要素のスペースがほとんどない場合、要素は次の行にジャンプします。このプロセスは、特定の行に十分なスペースができるまで続きます。今日は検証するには遅すぎます）。

補足説明: 通常のフロー (標準フローとも呼ばれます) は、要素が左から右、上から下の順に配置されることを規定します。

以下、例を通して一つ一つ検証していきます。 もちろん、私の一般化がいくつかの特殊な状況では当てはまらない可能性を排除するものではありませんが、私はそれを考えていませんでした。

これは時間の無駄ではありません。

div1 を左にフローティングに設定すると、div2 要素と重なっており、div1 がスペースを占有していないことがわかります。要素を絶対配置に設定すると、効果は z-index と同じになりますが、div2 テキストがカバーされていないことがわかります。なんて予測不能な浮き上がりでしょう！

3. div1 の高さと幅を削除すると、高さと幅を指定しない場合は、実際にはテキストの幅に応じて自動的にサポートされます。 、要素を inner-block に設定するのと同じですが、高さと幅を設定することによる効果も自己サポートされます。この属性は後で紹介します。ある意味、要素をフロートに設定することは、フローティングによって要素の方向が変更される可能性があることを除いて、インライン ブロックと同じです。

4. 2 つの要素 div1 と div2 を左にフローティングに設定します。私の要約によると、フローティング要素が親要素の境界線に触れるか、別のフローティング要素の境界線に触れると、フローティング要素は停止します。 div1 が親要素コンテナーの境界線に触れ、div2 が div1 の境界線に触れるとフローティングが停止します。問題があるとすれば、div2 要素が div1 の要素をカバーしようとしているのに、実際にはカバーされていないことです。これは私の結論が正しいことを証明しています。

5. div1 要素を左にフローティングに設定すると、フローティング要素が指定されている場合、後続の非フローティング ブロック レベル要素がフローティング要素に続き、要素の幅が自動的に埋められます。実際、div2 の幅は 100% で、div1 は div2 要素の上に浮動しています。前述したように、フローティング要素はドキュメント内のスペースを占有しません。