CSS フロートについて知らないこと

前の単語

floating 最も古い使用法は、画像を囲むテキストの植字に使用されるright">から来ています。現在、CSSではフローティングというレイアウト方法がよく使われていますが、この記事ではフローティングコンテンツについて詳しく紹介し整理していきます

定義

float Float

フローティング要素は、通常の流れから離れて、左または右に移動します。親レベル境界または別の浮動要素に達するまで指定された方向を停止します

値: left | none | none

適用対象: すべての要素

継承: none

[注意]非置換要素がフローティングの場合は、要素の

width

を宣言する必要があります。そうでない場合、CSS 仕様に従って、要素の幅は 0 になる傾向があります

特徴

[1] Floating flow

In通常のフローでは要素が順番に配置されますが、フローティング要素もフローティングフローを構成します

【2】ブロックレベルのボックス

フローティング要素自体は、要素自体が何であるかに関係なく、ブロックレベルのボックスを生成します。フローティング要素の周囲の

マージン

はマージされません

【3】ラッピング

フローティング 要素を含むブロックは、最も近いブロックレベルの祖先要素を参照し、子孫のフローティング要素は上、左、下を超えてはなりません包含ブロックの右側の境界。包含ブロックの高さが設定されておらず、包含ブロックがフローティングである場合、包含ブロックの幅が設定されておらず、包含ブロックがフローティングである場合、包含ブロックはその子孫の浮動要素をすべて含むように拡張されます。

【4】破壊的

フローティング要素は、通常の流れから離脱し、自身のラインボックス

プロパティ

を破壊し、そのブロック要素の高さを崩壊させます。フローティング ボックスの隣のライン ボックスが短くなり、フローティング ボックス用のスペースがスペースから残され、ライン ボックスがフローティング ボックスの周囲に再配置されます

パフォーマンス[1] の左 (または右) 外側の境界浮動要素は、ソース ドキュメントの境界に以前に出現した左浮動 (または右浮動) 要素の右 (左) 外側境界でなければなりません。後から現れる浮動要素の上端が、最初に現れる浮動要素の下端よりも下にない限り

[2] 左浮動要素の右外枠は、右浮動要素の左外枠の右側にはなりません要素をその右側に配置します。右フロート要素の左外側境界線は、その左側にある左フロート要素の右外側境界線の左側にはなりません

[3] 左 (または右) 浮動要素であり、前者の右の外側境界は、それを含むブロックの右 (左) 境界の右 (左) にはできません

[4] 浮動要素の左 (または右) 外側境界は、それを含むブロックの左 (または右) 内側の境界

[5] 浮動要素 要素の上部は、親要素の内側の上部よりも高くすることはできません。フローティング要素がマージされた 2 つのマージンの間にある場合は、2 つの要素の間にブロックレベルの親要素があるかのようにフロート要素を配置します

[6] フロート要素の上部は、以前のすべてのフローティング要素よりも高くすることはできません。レベル要素の上部が高くなります

[7] フローティング要素がソースドキュメント内の別の要素の前に表示される場合、フローティング要素の上部は、要素

[8] フロート要素 できるだけ高い位置に配置する必要があります

[9] 左フロート要素はできるだけ左に、右フロート要素はできるだけ右に配置する必要があります可能。位置が高くなるほど、右または左にさらに浮動します

オーバーラップ

浮動要素が親要素の境界を超えるには 2 つの方法があります。1 つは、浮動要素の幅を幅よりも大きくすることです。もう 1 つは親要素の幅を設定するもので、もう 1 つは負のマージンを設定するものです。フローティング要素のマージンがマイナスで、フローティング要素が通常のフロー要素と重なっている場合

【1】インラインボックスがフローティング要素と重なっている場合、枠線、背景、コンテンツがすべてフローティング要素の上に表示されます

【2】ブロック ボックスがフローティング要素に重なる場合、その境界線と背景はフローティング要素の下に表示され、コンテンツはフローティング要素の上に表示されます

【関連推奨事項】

1.

無料の CSS オンラインビデオチュートリアル

2. CSS オンラインマニュアル

3. php.cn Dugu Jiijian (2) - CSS ビデオチュートリアル

以上がCSS フロートについて知らないことの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。