clear

クリア（レイアウトとボックスモデル）

意味フロートの解除

clearとは？

clearプロパティは、フロートを解除するために使用します。これにより、フロートしている要素の横に指定した要素が回り込まないようにすることができます。

clearの具体的な使い方

両方向のフロートを解除する例

<style>
    .clearfix {
        clear: both;
    }
</style>

<div class='clearfix'>
    この要素はフロートの影響を受けません。
</div>

'clearfix'クラスが指定された要素が、左右どちらかにフロートしている要素の影響を受けずに配置されるように設定しています。

左方向のフロートを解除する例

<style>
    .float-left {
        float: left;
        width: 50%;
    }
    .clear-left {
        clear: left;
    }
</style>

<div class='float-left'>左に浮動</div>
<div class='float-left'>左に浮動</div>
<div class='clear-left'>左の浮動を解除</div>

2つの要素を左に浮動させ、3つ目の要素で左の浮動を解除しています。

clearに関するよくある質問

Q. clearプロパティの役割は？

A. clearプロパティは、フロート要素の影響を受けないようにするために使用します。指定した側（左、右、または両方）にフロート要素がある場合、その下に配置されます。

Q. clearの値にはどんなものがある？

A. clearの主な値には、left（左フロートを解除）、right（右フロートを解除）、both（両方のフロートを解除）、none（クリアしない）があります。

Q. clearfixとは何ですか？

A. clearfixは、フロート要素を含む親要素の高さ崩れを防ぐためのテクニックです。通常、親要素にクラスを追加し、::afterなど疑似要素を使って実装します。

clearが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのclearやborder-width、padding-left、float、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。