ホームページ > 記事 > ウェブフロントエンド > CSSでのfloatの使い方
float 属性は、通常の流動的なレイアウトに影響を与えることなく、ページ上で要素をフローティングし、隣接する要素と並べて表示します。 float 値は、left (左 float)、right (右 float)、none (clear float) です。フローティング要素は、コンテンツのオーバーフロー、間隔、親コンテナーの高さに影響します。フロートをクリアするメソッドには、属性のクリア、フローティング要素、およびオーバーフロー: 非表示が含まれます。
CSS での float の使用法
float 定義
CSS の float プロパティは、要素をコンテンツ ボックスの外側に配置し、ページ上で要素をフロートさせます。フロート要素は他の要素の通常の流体レイアウトに影響を与えませんが、隣接する要素と並んで表示されます。
float 値
float 属性は次の値を受け入れることができます:
使用法
要素をフローティングするには、そのスタイルに float 属性を追加します:
<code class="css">element { float: left; }</code>
影響します
フローティングされた要素は、その近くの要素に影響します:
フロートのクリア
フロートをクリアするには、次のいずれかの方法を使用できます:
例
次のコードは、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 サイトの他の関連記事を参照してください。