CSS の深い理解 float_html/css_WEB-ITnose

× 内容 [1] 定義 [2] 特性 [3] パフォーマンス [4] 重複

前の単語

フローティングの最初の使用は からです。 , 画像の周囲に文字を回り込ませる写植処理です。現在、CSSではフローティングが一般的に使われているレイアウト方法です

定義

Float Float

フローティング要素は、通常の流れから離れて、左またはに移動します。指定された方向に右に移動します

値: left | right | none

適用先: すべての要素

継承: none

【注意】非置換要素をフローティングするには、要素の幅を宣言する必要があります。そうでない場合、CSS 仕様に従って、要素の幅は 0 になる傾向があります

特徴

【1】フローティングフロー

要素は 1 つに配置されます通常のフローではフローティング要素もフローティングフローを構成します

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

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

【3】ラッピングプロパティ

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

【4】破壊的

フローティング要素は通常の流れから離脱し、自身のラインボックス属性を破壊し、その包含ブロック要素の高さを崩壊させます。フローティング ボックスの隣のライン ボックスが短くなり、フローティング ボックスのスペースがなくなると、ライン ボックスがフローティング ボックスの周囲に再配置されます

パフォーマンス

[1] 左側 (または右側)。フローティング要素の外側の境界は、以前にソース ドキュメントに表示されていた左フローティング (または右フローティング) 要素の右 (左) 端である必要があります。) 外側境界。後から現れる浮動要素の上端が、最初に現れる浮動要素の下端よりも下にない限り

[2] 左浮動要素の右外枠が、右浮動要素の左外枠の右側にならないようにするその右側にある要素。 right-floated 要素の左外枠は、その左側にある left-floated 要素の右外枠の左側にはなりません

[3] 左 ( 右 ) の左に別の浮動要素があります。または右) 浮動要素、および前者の右の外側境界は、その包含ブロックの右 (左) 境界の右 (左) にできません

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

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

[7] フローティング要素がソース文書内の別の要素の前に現れる場合、フローティング要素の上部は、その要素によって生成されたボックスを含む行ボックスの上部よりも高くすることはできません。

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

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

オーバーラップ

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

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

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