CSSでのfloatの使い方

float 属性は、通常の流動的なレイアウトに影響を与えることなく、ページ上で要素をフローティングし、隣接する要素と並べて表示します。 float 値は、left (左 float)、right (右 float)、none (clear float) です。フローティング要素は、コンテンツのオーバーフロー、間隔、親コンテナーの高さに影響します。フロートをクリアするメソッドには、属性のクリア、フローティング要素、およびオーバーフロー: 非表示が含まれます。

CSS での float の使用法

float 定義

CSS の float プロパティは、要素をコンテンツ ボックスの外側に配置し、ページ上で要素をフロートさせます。フロート要素は他の要素の通常の流体レイアウトに影響を与えませんが、隣接する要素と並んで表示されます。

float 値

float 属性は次の値を受け入れることができます:

• left: 要素をコンテナーの左側にフローティングします。
• 右: 要素をコンテナの右側にフロートさせます。
• none: フロートをクリアし、要素を通常の流体レイアウトに戻します。

使用法

要素をフローティングするには、そのスタイルに float 属性を追加します:

<code class="css">element {
  float: left;
}</code>

影響します

フローティングされた要素は、その近くの要素に影響します:

• コンテンツのオーバーフロー: フローティングされた要素のコンテンツ隣接する要素からオーバーフローする可能性があります。
• 間隔: フローティング要素と隣接する要素の間に間隔がある場合があります。
• 親コンテナの高さ: フロート要素の高さが親コンテナより高い場合、親コンテナの高さはフロート要素に合わせて自動的に調整されます。

フロートのクリア

フロートをクリアするには、次のいずれかの方法を使用できます:

• 属性のクリア: 要素にクリア属性を適用し、そのフロート要素をすべてクリアします。
• 浮動要素: 浮動要素の後に浮動要素を追加し、浮動要素を新しい行にクリアします。
• overflow: hidden: overflow プロパティを親コンテナに適用して、コンテナ内のフローティング要素を非表示にします。

例

次のコードは、2 つの浮動要素を持つコンテナーを作成します。

<code class="html"><div class="container">
  <div class="element1">元素 1</div>
  <div class="element2">元素 2</div>
</div></code>

<code class="css">.container {
  display: flex;
}

.element1 {
  float: left;
  background: red;
  width: 100px;
}

.element2 {
  float: right;
  background: blue;
  width: 100px;
}</code>

出力:

<code>元素 1 | 元素 2</code>

以上がCSSでのfloatの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。