CSS を使用してフローティングを削除するいくつかの方法を説明する例

CSSレイアウトにおいてfloat(フローティング)は非常に重要な属性であり、要素のフローティング方向を設定することで簡単にページレイアウト効果を得ることができます。ただし、フローティング要素は、特に親要素が高さを設定していない場合に問題を引き起こす可能性があり、フローティング子要素によって親要素の高さが崩れ、ページ レイアウトが混乱する可能性があります。したがって、フロートを正しく削除することも Web 開発の重要な部分です。

この記事では、フロートのクリア (クリア)、疑似要素の使用、CSS グリッドの使用、およびその他のテクニックを含む、フロートを削除するいくつかの方法を例を使用して示します。

1. float のクリア

最も一般的に使用される方法の 1 つは、float をクリアすることです。親要素またはフローティング要素の後に明確なフローティング タグを追加して、フローティング要素を削除する効果を得ることができます。

フロートをクリアするには多くの方法があります。より一般的な方法は、空のタグを使用し、CSS を通じてフロートをクリアする効果を設定することです。一般的に使用される空のタグは、<div> と<スパン>。

たとえば、親要素に複数のフローティング要素が含まれている場合、要素の最後に空の div タグを追加し、CSS ファイル内のタグに clear:both 属性を追加できます。

<div class="parent">
  <div class="child-float"></div>
  <div class="child-float"></div>
  <div class="clear-fix"></div>
</div>

.clear-fix{
  clear:both;
}

このようにして、親要素の float を簡単に削除できます。

2. 疑似要素を使用する

フローティング要素をクリアすることに加えて、CSS 疑似要素を使用して、フローティング要素によって引き起こされる問題を解決することもできます。 CSS3 では、:before および :after 疑似要素を使用できます。これらは、それぞれ要素の前後に仮想要素を追加することを表します。

親要素に ::after 疑似要素を追加して、子要素のフローティングをクリアできます。具体的な方法は、clearfix クラス (clearfix::after など) を親要素に追加することです。次に、CSS ファイルに、clearfix::after content:""; display:block; clear:both; 属性値を追加します。

<div class="parent clearfix">
  <div class="child-float"></div>
  <div class="child-float"></div>
</div>

.clearfix::after{
  content:"";
  display:block;
  clear:both;
}

さらに、疑似要素を使用して、フローティング要素にラッピング レイヤーを追加することもできます。具体的な方法は、フローティング要素に ::before および ::after 疑似要素を追加し、その中にコンテンツを設定することです。 2 つの疑似要素: ""; display:table 属性値により、レイヤーをラッピングする効果を実現できます。

<div class="parent">
  <div class="float-wrap">
    <div class="child-float"></div>
    <div class="child-float"></div>
  </div>
</div>

.float-wrap::before, .float-wrap::after{
  content:"";
  display:table;
}

.float-wrap::after{
  clear:both;
}

3. CSS グリッドを使用する

CSS グリッドは、より柔軟なレイアウト方法を提供する新しいレイアウト方法です。CSS グリッドを使用することで、複雑なレイアウトを非常に便利に実現できます。ページ レイアウト効果。 CSS グリッドを使用する場合、grid-auto-rows プロパティを使用して、子要素の高さに合わせて行の高さを自動的に調整できます。

<div class="parent-css-grid">
  <div class="child-float"></div>
  <div class="child-float"></div>
</div>

.parent-css-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(min-content, max-content);
}

この例では、親要素をグリッド レイアウトに設定し、次に 2 つの列 (1fr と 1fr) を設定し、grid-auto-rows 属性を使用して行の高さを高さに合わせて自動的に調整します。子要素の。このように、子要素がfloatであっても、様々なブラウザにスムーズに対応することができます。

まとめ

上記の方法により、簡単にフローティングを解除し、親要素の高さ崩れによる問題を回避することができます。もちろん、シナリオごとに異なるフローティング ソリューションが存在する可能性がありますが、適切なソリューションを選択することで、ページ レイアウトの効果を向上させ、Web 開発の効率を向上させることができます。

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