CSSのafter疑似クラスでfloatをクリアする主流の方法を詳しく解説！-CSSチュートリアル-php.cn

CSSのafter疑似クラスでfloatをクリアする主流の方法を詳しく解説！

藏色散人

リリース： 2018-10-23 17:18:46

オリジナル

3258 人が閲覧しました

この記事では、疑似クラスの後に css を使用して のフローティングを解除する方法を中心に紹介します。

まず最初に、誰もが理解する必要がありますCSSフローティングとは何ですか?

要素をドキュメントフローから切り離し、指定された方向に移動し、親の境界または隣接する浮動要素に遭遇したときに停止します。

これは次のように理解することもできます。フローティングボックスは、その外縁が収容ボックスまたは別のフローティングボックスの境界線に触れるまで、左または右に移動できます。フローティングボックスはドキュメントの通常のフローにないため、ドキュメントの通常のフロー内のブロックボックスは、フローティングボックスが存在しないかのように動作します。

それでは、なぜ フロートをクリアするのでしょう ?

これは、フローティング要素が全体のレイアウトに影響を与え、バグを引き起こす場合があるためです。

次のコード:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>css浮动示例</title>
<head>
    <style>
        .demo{
       
            background: #ffffff;
            border: 1px solid black;
            margin: 50px auto;
            padding: 50px;
        }
        .demo1{
    float: left;
    width: 100px;
    height: 50px;
    color: white;
    background: #1094f2;
    border: 1px solid black;
        }
        .demo2{
    float: left;
    width: 100px;
    height: 50px;
    color: white;
    background: #9492ff;
    border: 1px solid black;


         }
 </style>
</head>
<body>
<div class="demo">
    <div class="demo1">demo1</div>
    <div class="demo2">demo2</div>
</div>

</body>
</html>

ログイン後にコピー

効果は次のとおりです:

CSSのafter疑似クラスでfloatをクリアする主流の方法を詳しく解説！

図で、次の設定を行っていることがわかります。 demo1.2 の float 属性 float :left の後、親 div は開かれません。また、デモでは幅と高さの寸法を設定しませんでした。

ここでは、CSS の floating 属性 が何であるかを最初に理解する必要があります。

float 属性要素がどの方向にフロートするかを定義します。歴史的に、このプロパティは常に画像に適用され、テキストが画像の周りを回り込むようにしていましたが、CSS では任意の要素をフローティングにすることができます。フロート要素は、要素のタイプに関係なく、ブロックレベルのボックスを作成します。

それでは、レイアウトに影響を与えるフロートに遭遇した場合、どうやってそれらをクリアすればよいのでしょうか?

以下では、疑似クラスの後にcssを使用する、最も主流のクリーニング方法を紹介します。

次のコードを追加するだけです:

.demo:after{
    clear: both;
    content: &#39;&#39;;
    display: block;
}

ログイン後にコピー

最終的な効果は次のとおりです:

CSSのafter疑似クラスでfloatをクリアする主流の方法を詳しく解説！

実際、主な原則は次のとおりです。 is:

:after と :before を使用して 2 つの要素ブロックを要素に挿入し、float をクリアする効果を実現します。

この記事は、after 疑似クラスを使用してフロートをクリアする具体的な方法について説明したもので、困っている友人の役に立てば幸いです。】

フロントエンド関連の知識について詳しく知りたい場合は、PHP 中国語 Web サイトの CSS ビデオチュートリアル、Bootstrap チュートリアル、およびその他の関連チュートリアルを参照してください。みなさんもぜひ参考にして学んでください！

以上がCSSのafter疑似クラスでfloatをクリアする主流の方法を詳しく解説！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

CSSのafter疑似クラスでfloatをクリアする主流の方法を詳しく解説！