css要素をフローティングする際に注意すべき点は何でしょうか？

注: 1. 浮動要素の左外側境界は、それを含むブロックの左内側境界を超えることはできず、右外側境界についても同様です; 2. 浮動要素の上部はそれより高くすることはできません; 3. フローティング要素のトップは、前のフローティング要素またはブロックレベル要素のトップよりも高くすることはできません; 4. 左側のフローティング要素は、できるだけ左になければなりません。 、右側の浮動要素はできるだけ右になければなりません、など。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS でのフローティング:

CSS で要素を親要素の左または右に移動するには、 float を要素に float.

float:left/right

float オプションは 2 つあり、1 つは float:left です。 float:rightright float

もあります。 float が要素に設定されている場合、要素は標準のドキュメント フローから切り離され、要素の後ろの要素は要素の元の位置を占めます。その後ろの要素はコンテンツが絞り出されます。

フローティング要素を持つ要素には幅と高さがなく、要素の親要素の高さも表示されます。つまり、高さが折りたたまれます。フローティング要素を持つ要素の幅と高さは次のようになります。要素内のコンテンツに基づいて動的に変更します。親要素の高さをリセットします。

一部の要素に左フローティングが設定されている場合、それらの要素は同じ行に表示されますが、これらの要素の幅の合計が親要素よりも大きい場合、余分な部分(要素を含む）は以下になります 1行表示されます。

浮動要素が従う必要があるルール (注記)

• 浮動要素の左外側境界含まれているブロックの左側の内部境界を超えることはできません。右側の境界も同様です。

• #要素が互いに覆い隠さないようにするには、浮動要素の左側 (または右側) の外側境界を使用します。後のフローティング要素の上部が最初のフローティング要素の下部よりも下にない限り、前の左フロート要素 (右フローティング要素の右 (または左) の外枠) 要素である必要があります。
  

• #フローティング要素の左外側境界は、後のフローティング要素の上部でない限り、ソース ファイル内でその前にある左フローティング要素の右外側境界でなければなりません。要素は最初の浮動要素の上部より前にあり、下部よりも下にあります。

• 左フロート要素の右外側境界線は、その右側にあるライトフロート要素の左外側境界線の右側には表示されません。

#フローティング要素の上部は、親要素の内側の上部よりも高くすることはできません
フローティング要素の上部は、それより高くすることはできません以前のすべてのフローティング要素よりも高い、またはブロックレベル要素の上部が高い
フローティング要素がソースドキュメント内の別の要素よりも前に表示される場合、フローティング要素の上部を高くすることはできません要素によって生成されたボックスを含む行ボックスの最上部よりも高くなります。
浮動要素は、その要素を含む要素の境界を超えることはできません。左 (または右) の浮動要素の左 (または右) に別の浮動要素があり、前者の右の外側の境界を、その要素を含むブロックの右 (または左) の境界の右 (または左) に置くことはできません。十分なスペースがない場合、フロート要素は新しい「行」に押し込まれます。
フロート要素は、できるだけ高い位置に配置する必要があります。つまり、他の制約を満たすことを前提として、できるだけ高く浮かせます。

• #左フロート要素はできるだけ左に配置し、右フロート要素はできるだけ右に配置する必要があります

浮動ソート規則

浮動要素は標準のみをカバーするため、同じ方向の浮動要素が前に表示されます。 flow.

• さまざまな方向のフローティング要素の場合、左にフロートする場合は左のフロートを探し、右にフロートする場合は右のフロートを探します。

• フローティング要素のフローティング後の位置は、フローティング要素がフローティングする前の標準ストリームによって決定されます 位置を決定します

• スティッキング現象:最後のフローティング要素が幅を超える場合親要素の幅が足りない場合は、次の要素を自動的に見つけて貼り付けます それでも幅が足りない場合は、前へ～親要素の幅がまだ足りない場合は、次の要素を見つけるだけです

• #グラフィックとテキストの混合

• #クリアフローティング

前の親要素の高さを設定します (開発中に高さを設定しないことが最善であるため、この利便性はお勧めできません)

• 以下の要素（クリア属性追加後はマージン属性が無効になるので注意）

• 間仕切り工法

• 外壁工法
  中央にブロックレベルの要素を追加し、clear:both を設定します (注: 2 番目のボックスでは margin-top を使用できますが、最初のボックスでは margin-bottom を使用できないため、通常は margin-bottom も最初のボックスも 2 番目のボックスのマージントップも設定されますが、追加のブロックレベル要素の高さは直接設定されます)

  • 内壁法
    最初のボックスの末尾にブロック レベル要素を書き込み、clear: 両方を設定します (注: 最初のボックスでは margin-bottom を使用でき、2 番目のボックスでも margin-top を使用できます。追加のブロック レベル要素で高さを設定することもできます) )
• #違い: 内壁方式では最初のボックスの高さをサポートできますが、外壁方式ではサポートできません(要素が追加されるため、変更された方法も推奨されません)

疑似要素を使用する (推奨)

.box1::after{
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
.box1{
    *zoom: 1;   // 兼容IE6
}

overflow: hidden(推奨)

.box1{
    *zoom: 1;   // 兼容IE6
}

(学習ビデオの共有:

CSS ビデオ チュートリアル 、Web フロントエンド )

以上がcss要素をフローティングする際に注意すべき点は何でしょうか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。