ホームページ  >  記事  >  ウェブフロントエンド  >  右側のフロートをクリアするCSSコードは何ですか?

右側のフロートをクリアするCSSコードは何ですか?

藏色散人
藏色散人オリジナル
2023-01-30 09:39:522174ブラウズ

右側のフロートをクリアする CSS コードは「clear:both;」です。CSS の「clear:both」属性の機能はフロートをクリアすることです。フロートを設定するとドキュメント フローが破壊されます。この問題は、clear float を設定することで解決できますが、clear:both が設定されている現在の要素は、前の要素の float 属性を持つ要素をフローティングしていないかのように扱うと考えられます。 、それによって自分自身への影響を排除します。

右側のフロートをクリアするCSSコードは何ですか?

このチュートリアルの動作環境: Windows 10 システム、CSS3 バージョン、DELL G3 コンピューター

CSS コードは何ですか右側のフローティングCSSをクリアしますか?

右側のフロートをクリアするための CSS コードは、clear:both;

CSS の clear:both 属性は、フロートをクリアするために使用されます。 float を設定するとそれが破壊されます。ドキュメントのフロー構造はその後のレイアウトに影響します。このとき、clear float を設定することでこの問題は解決できます。clear:both が設定されている現在の要素は、フロート属性を持つ要素をその要素内で扱うと考えることができます。これを表示するには、自分自身への影響を排除するために、

クリアを設定した場合と設定しなかった場合の結果を比較してください:両方を説明するには、

<style>
        .test-title{
            background-color: orange;
        }
        .test-content{
            background-color: #ddd;
            height:100px;
            /* clear:both; */
        }
        .left{
            float: left;
            width: 200px;
            background-color: pink;
        }
        .right{
            float: left;
            background-color: aquamarine;
        }
    </style>
</head>
<body style="margin: 10px;">
    <div class="test-title">头部信息</div>
    <div class="test-container">  
        <div class="left">左侧菜单</div>
        <div class="right">右侧内容</div>
        <div  class="test-content" >we are one we are one we are one </div>
    </div>
</body>

なぜ次ののかを説明します。この状況は、左側のメニューと右側のメニューが float:left に設定されているために発生します。このとき、これらはフローティング フローに属し、特定の位置を占めています。テストコンテンツのコンテンツはドキュメント フローに属しているため、 test-container の上の境界線の横にある

右側のフロートをクリアするCSSコードは何ですか?

しかし、test-content をクリアに設定すると、両方の値が表示されます。前のフローティングの影響を排除します。つまり、左側と右側のスタイルを無視します。float:left 属性を設定するときは、左側と右側を通常のドキュメント フローとして扱います。test-content はブロック レベルの要素であるため、自動的にラップされるため、次の状況になるか、疑似要素を設定します。

.test-content::before,.test-content::after{
    content:&#39;&#39;;
    display:block;
    clear:both;
}

右側のフロートをクリアするCSSコードは何ですか?

推奨学習: "css ビデオ チュートリアル "

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

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