CSS でフロートをクリアする原理の紹介-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS でフロートをクリアする原理の紹介

王林

Jul 18, 2020 pm 05:31 PM

css 原理浮く

CSS でフロートをクリアする原理の紹介

まず第一に、clear:both が float をクリアするための鍵であることを知っておく必要があります。

(推奨チュートリアル: css クイックスタート )

clear は、要素のどの側が他のフローティング要素を許可しないかを指定する CSS の位置決め属性です。次に、clear:both は、左側と右側で浮動要素を許可しないことを規定します。

clear 属性はブロックレベルの要素でのみ機能します。これは、フローティングスタイルをクリアする際の display:block の役割です。

さらに、visibility: hidden;height: 0;content の値が空であれば、書き込まれているかどうかは関係ありません。

それでは、なぜフロートをクリアしたいのでしょうか? 最も一般的な理由は、外側のコンテナが高度に折りたたまれているためです。コードのデモ:

<style>
.wrap {
    width: 200px;
    border: 1px solid #333;
}
.wrap:after {
    content: &#39;&#39;;
    display: block;
    clear: both;
}
.left {
    float: left;
    background: blue;
    height: 100px;
    width: 100px;
}
.right {
    float: left;
    background: red;
    height: 50px;
    width: 100px;
}
</style>
<body>
    <div class=&#39;wrap&#39;>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

ログイン後にコピー

それを明確に示すために、.wrap 内のコンテンツ次の図に示すように、:after スタイルは content : 'after pseudo-element' に設定されます。

CSS でフロートをクリアする原理の紹介

次に、clear:both を .wrap:after スタイルに追加します。これは、after 疑似要素の左側と右側で浮動要素が許可されないことを示します。はafterの擬似要素を入れるしかないのですが、今回は以下の画像のようになります。

CSS でフロートをクリアする原理の紹介

ちなみに、.wrap 親要素の高さは支えられており、これにより浮き上がりが効果的に解消され、外側のコンテナの高さの崩れの問題が解決されます。

次に、 .wrap:after スタイルのコンテンツを content:' ' に設定すると、最終的には次の図のようになります。

CSS でフロートをクリアする原理の紹介

以上がCSS でフロートをクリアする原理の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7774

Java チュートリアル

1644

CakePHP チュートリアル

1399

Laravel チュートリアル

1296

PHP チュートリアル

1234

Related knowledge

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTML、CSS、およびJavaScriptの理解：初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。