CSSのクリアの機能は何ですか-CSSチュートリアル-php.cn

CSSのクリアの機能は何ですか

下次还敢

リリース： 2024-04-26 11:12:15

オリジナル

1066 人が閲覧しました

CSS のクリア属性 (clear) は、要素と浮動要素の間の関係を制御し、非浮動要素が浮動要素の下に流れないようにするために使用されます。使用法は次のとおりです: none: float をクリアしません left: 左の float をクリアします right: 右の float をクリアします両方: 左右の float をクリアします

CSSのクリアの機能は何ですか

クリアしますCSS の属性

clear 属性の役割は、要素と浮動要素の間の関係を制御して、非浮動要素が浮動要素の下に流れないようにするために使用されます。

使用法

<code class="css">clear: none | left | right | both;</code>

ログイン後にコピー

none: デフォルト値、浮動小数点をクリアしません。
left: 左側のフローティング要素をクリアします。
right: 右側のフローティング要素をクリアします。
両方: 左側と右側のフローティング要素をクリアします。

#関数

要素がフローティングされると、それらはドキュメントフローの外側に配置され、後続の非フローティング要素はフローティング要素の下に流れます。 clear 属性は、非フロート要素のクリア値を設定して、強制的にフロート要素の上から開始するようにします。

たとえば、次のコードは、段落要素がフローティングイメージの下に流れないようにします。

<code class="css">p {
  clear: both;
}</code>

ログイン後にコピー

Example

次の HTML を想定します。 code:

<code class="html"><div class="container">
  <div class="image float-left"></div>
  <p>段落</p>
</div></code>

ログイン後にコピー

clear 属性が設定されていない場合、段落要素が image 要素の下に流れるため、レイアウトが混乱します。

clear 属性を設定すると、段落要素が画像要素の上から始まるようにできます:

<code class="css">.container {
  width: 500px;
}

.image {
  float: left;
  width: 200px;
  height: 200px;
  background: #f00;
}

p {
  clear: both;
}</code>

ログイン後にコピー

この例では、段落要素が画像要素の上から始まるように強制され、レイアウトが明確。

以上がCSSのクリアの機能は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。