【CSS】clearfixの使い方

タグ :

1 HTMLでの使用方法
2 CSSへの記述方法
3 新しいclearfix（モダンな手法）

HTMLでの使用方法

適応させたい場所にclassでclearfixを付けます。



/* HTMLでの使用方法 */
<div class="clearfix">
    <div class="float-left">左側の浮動要素</div>
    <div class="float-right">右側の浮動要素</div>
</div>

CSSへの記述方法

CSSに以下のコードを記述します。



.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.clearfix::before {
    content: "";
    display: block;
    clear: both;
}

.clearfix {
    display: block;
}

1.clearfix::after:

content: “”: 擬似要素の内容を空の文字列に設定します。
display: block: 擬似要素をブロック要素として表示します。
clear: both: 浮動要素の影響をクリアします。

2.clearfix::before:

3.clearfix:

display: block: 要素をブロック要素として表示します。

新しいclearfix（モダンな手法）



.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

現代のブラウザ環境に適した、改良されたシンプルなスタイルです。

.clearfix::after: このセレクタは、.clearfixクラスを持つ要素の後に擬似要素（::after）を追加します。

content: “”: 擬似要素の内容を空の文字列に設定します。これは擬似要素を表示させるために必要です。

display: table: 擬似要素をテーブルセルとして表示します。これにより、擬似要素はブロック要素のように振る舞い、レイアウトの問題を解決します。

clear: both: 擬似要素が両側の浮動要素をクリアするように設定します。これにより、擬似要素の前の浮動要素の影響を受けなくなります。

前ページに戻る