CSSにおけるフローティングの影響とフローティングを解除する方法を詳しく解説

• 最初の電話面接で、面接官は私に、フローティングを削除する方法を知っていますか?と尋ねました。
  これが私の答えです: 「方法は2つあります。1つは、floatから削除する必要がある要素に「clear:both」を使用することです。もう1つは、親要素に「overflow:hidden」を使用することですフローティング要素の正直なところ、私はそれを見たことがありませんでした。最初の呼び出しのため、上記のレッスンを学んだ後、「CSS デザイン ガイド」の特別な章でフローティングを削除する方法について説明しました。しかし、時間が足りなかったので、そのまま読みました。
  1. クリア: 両方

  3. フローティング要素を削除します。フローティング要素
その後、私は妹にインタビューしました。その後、彼は次のように付け加えました。「この水平方向の
• ナビゲーション

  列を見てください。フローティングで実装する必要があるため、絶対に overflow:hidden を使用できません。これは、行列が表示されなくなります。どうすれば解決しますか？」
  そのとき私が答えたのは、浮動要素の後に浮動要素を削除する要素を追加することでした。面接官はそれが正しいか間違っているかは言いませんでした。
  それは正しいですか? それとも自分でナビゲーションを行う必要がありますか?
  
  
  今日はフローティングの削除についてのメモを書きます。内容は書籍「CSS デザイン ガイド」から引用しています
  
  

  フローティングの影響

最新のブラウザのパフォーマンス

2 番目の inline 要素が左にフローティングに設定されている場合は、inline 要素の後に配置します。が float に設定されている場合、その
• 表示

  はブロックに変更されますが、そのサイズは設定またはそのコンテンツのサイズに従って表示され、その隣のインライン要素はスペースの行全体を占有しません。この行の浮動要素は浮動要素と同等の立場にありますが、設定された幅を持つインライン ブロック レベル要素の隣にある場合、インライン ブロック レベル要素も浮動要素の後ろにあります。

  それがブロックレベルの要素の隣にある場合、これによりフローティングインライン要素のスペースが設定されます。

• IE7 以前では。
  IE ブラウザ のバージョンでは、フローティング要素の隣にあるインライン要素が新しい行に表示されます。
  
  
  

  ブロックレベルの要素がフローティングされた後、ブラウザはスペースを取り戻します。元々はブロックレベルの要素によって占有されており、その直後の要素は、スペースが許せばフローティング要素と同じレベルに引き上げられます。フローティングに設定されたブロックレベルの要素は、元の位置を維持し、静かに監視します。影響を与える要素は変更されます
float に設定されていない子要素の親要素の境界線も縮小されます

• インライン要素が float になった後は、実際にはそのようなことはないようです。現在行っている演習でもこの設定を確認しましたが、異なるエクスペリエンスがもたらされます。
  

• インライン要素のフローティングに関しては、他サイトのソースコードを参照する際に遭遇したことがないので、まずは放置しておきます。
  
  

以下は、浮動要素を囲むいくつかの方法と、それぞれの方法に適した状況です。

• 
  

HTMLタグに子要素を追加し、それにclear
属性

を適用するだけです。

  <section >
      <img src="7f0ff.png" alt="" style="float:left" />
      <p>it s fun to float</p>
      <p style="clear:left;"></p>
  </section>
  <footer>
      here is the footer element.
  </footer>

• しかし、この純粋なパフォーマンス要素を特に追加したくない場合は、CSS を使用してこの明確な要素を追加できます。セクションにクラスを追加します:

  .clearfix:after{
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;}

  • メソッド 1:

    親要素に overflow:hidden を追加しますこのメソッドは、親要素がフローティング子要素を強制的に囲みます。

    実際: overflow: hidden ステートメントの本当の目的は、含まれる要素が大きすぎるコンテンツによって引き伸ばされるのを防ぐことです。 overflow: hidden を適用した後、含まれる要素は設定された幅と高さを維持し、サイズを超えるテキスト コンテンツはコンテナによって切り取られます。さらに、overflow:hidden には別の効果があります。つまり、親要素に浮動子要素を確実に強制的に含めることができます。
  ただし、テキスト コンテンツが設定された幅を超えると、その結果、非表示になります。

  • 方法 2: 親要素を同時にフローティングします
    実際、これは、親要素がフローティングの子要素を囲むだけであり、明確にフローティングしているわけではありません。 、浮動子要素を囲みますが、Web サイト全体のレイアウトに対する浮動親要素自体の影響を解決できず、一部の Web サイトのソース コードが依然としてこのメ​​ソッドを使用し、別の親要素を囲んでいることがわかりました。要素をフローティング親要素の外側に配置し、Web ページ内の他のコンテンツのレイアウトに影響を与えないように幅と高さを設定します。

  • 方法 3: 非浮動クリア要素を追加する
    は、親要素の最後に非浮動子要素を追加し、子要素の浮動要素をクリアします。
    ただし、包含要素の末尾に子要素をクリア要素として追加する方法は 2 つあります。

  これら 3 つのメソッドはすべて、浮動子要素を囲む親要素を使用して実装されています。
  これら 3 つのメソッドを分析します:
  1. ドロップダウン メニュー の最上位要素に overflow:hidden を適用することはできません。そうしないと、その子要素としてドロップダウン メニューが表示されません。
  2. 自動的にマージンが中央に配置される要素にフローティング親要素テクノロジーを使用することはできません。そうしないと、中央に配置されなくなります。
  しかし、場合によっては親要素がない場合はどうなるでしょうか?
  もう 1 つ追加するのは簡単だと断言しますが、トラバースの深さが増加します。
  ある要素が浮動要素の影響を受けたいが、その後の要素も浮動要素の影響を受けないようにする場合。 、この要素内にブロック レベルの要素を追加し、このブロック レベルの要素のフロートをクリアすることができます。もう 1 つの注意点は、この要素に余分な高さを設定しないでください。そうしないと、効果が表示されません。 . ぜひご覧ください この記事は個人的にテストすることができます。

  【関連おすすめ】
  1.

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

  2.

  CSSオンラインマニュアル

  3.

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

  以上がCSSにおけるフローティングの影響とフローティングを解除する方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。