CSS での float の一般的な使用法と float のクリアの概要 (コード例)

この記事では、CSS でのフロートの一般的な使用方法とフロートのクリア方法について説明します (コード例)。必要な方は参考にしてください。

Floating は CSS の比較的厄介な属性であり、通常は float のクリアを伴います。今日はフローティングの作業をしていきます。

一般的な使用法

実際、要素を float に設定すると、次のような効果が得られます:

このようなイラストを左右に配置し、文字を折り返す効果を多くの雑誌で目にしたことがあるかと思います。

フローティングのもう 1 つの一般的な使用法は次のとおりです:

つまり、特定の行内で特定の部分を正しくします。通常、マージンを使用せずに、float を使用して実装されます。

フローティングによって引き起こされる問題

フローティング要素は親要素をサポートできないため、高さが崩れます。 ！

次の例を見てください:

<div>
  <div></div>
  <div></div>
</div>

.container {
  background-color: lightblue;
  font-size: 0;
}
.son1 {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: orange;
}
.son2 {
  width: 100px;
  height: 100px;
  float: right;
  background-color: lightgray;
}

大きなブロックが浮くと、それが表示されます。 展開できません親要素。通常、これはレイアウトが混乱するため、望ましくないことです。これは、親要素内のすべての子要素がフローティングであり、親要素の高さが 0 に折りたたまれる場合に特に顕著です。

float をクリアする

したがって、float を使用していてこれが発生したくない場合は、浮く。

float をクリアする方法はたくさんありますが、現在では私の個人的なお気に入りは次のとおりです。

まず、次の CSS を追加します。

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

次に。 で、親コンテナに clearfix クラスを追加します。最終的なコードは次のとおりです。

<div>
  <div></div>
  <div></div>
</div>

.container {
  background-color: lightblue;
  font-size: 0;
}
.son1 {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: orange;
}
.son2 {
  width: 100px;
  height: 100px;
  float: right;
  background-color: lightgray;
}
.clearfix:after {
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

得られる効果は次のとおりです。

フローティング要素は親コンテナの高さを拡張できます。

概要

• フローティング要素は親コンテナの高さをサポートできないため、クリアする必要があります。

• フローティング要素は親コンテナの高さをサポートできません。非常に単純であること 実装は右揃えです。

• フローティングを使用すると、テキストの折り返し効果を簡単に実現できます。

したがって、フローティングウェルを制御できるように、フローティングの使用シナリオに注意し、必要に応じてフローティングを解除してください。

以上がCSS での float の一般的な使用法と float のクリアの概要 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。