CSSのclearでfloat解除し、要素の回り込みを制御する方法をわかりやすく解説

clearプロパティは、要素が浮動要素（float）の横に並ぶかどうかを指定するプロパティです。floatで配置された要素があると、その下の要素がその隣に並んでしまうことがありますが、clearプロパティを使うことで、その要素の隣に並ばないように制御することができます。

clearプロパティの値とその効果

• none: 要素の前に浮動要素があっても、そのまま隣に並びます。
• left: 左側に浮動要素がある場合、それを避けて次の行から表示されます。
• right: 右側に浮動要素がある場合、それを避けて次の行から表示されます。
• both: 左右どちらかに浮動要素がある場合、それを避けて次の行から表示されます。

注意点と関連情報

clearプロパティは、floatでレイアウトを組んだ際に重要です。特に、floatを使った要素のレイアウトが崩れないように、要素が浮動要素と重ならないようにするために使用されます。また、clearfixのテクニックと組み合わせて使用することも多いです。

clearプロパティが効かない時の原因と対策

フロート要素が存在しない

clearプロパティは、フロートされた要素の回り込みを解除するために使用されますが、フロート要素が存在しない場合、clearの効果は確認できません。
対策: clearプロパティは、フロートされた要素（float: left;やfloat: right;）が存在する場合にのみ機能するため、対象要素がフロートされていることを確認しましょう。

要素がインライン要素の場合

clearは、ブロックレベルの要素に適用されるプロパティです。インライン要素に対しては効果がなく、フロートの回り込みを解除できません。
対策: clearプロパティを使用する要素がブロックレベルの要素であることを確認してください。インライン要素の場合は、display: block;などを指定して、ブロック要素に変更する必要があります。

レイアウトにflexやgridを使用している

clearプロパティは、フロート要素に対してのみ機能します。flexやgridレイアウトでは、フロートが使用されないため、このプロパティは効果がありません。
対策: flexやgridを使用している場合、clearプロパティを使う代わりに、align-itemsやjustify-contentなどの適切なレイアウト制御プロパティを使用してください。

共通するCSSコード

.css-sample-container {
        width: 100%;
        max-width: 600px;
        padding: 20px;
        margin: 20px auto;
        border: 1px solid #ccc;
        background-color: #f9f9f9;
        overflow: hidden; /* clearfix */
    }
    .css-sample-box {
        width: 100px;
        height: 100px;
        margin: 10px;
        float: left;
        background-color: #4CAF50;
        color: white;
        text-align: center;
        line-height: 100px;
        font-size: 14px;
    }
    

clear: left

clear: leftは、左側に浮動要素がある場合、その浮動要素の隣に並ばず、次の行に表示されます。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box">Box 1</div>
    <div class="css-sample-box">Box 2</div>
    <div class="css-sample-clear-left">clear: left</div>
    </div>

CSSコード

.css-sample-clear-left {
    clear: left;
}

表示結果

clear: right

clear: rightは、右側に浮動要素がある場合、その浮動要素の隣に並ばず、次の行に表示されます。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box">Box 1</div>
    <div class="css-sample-box" style="float:right;">Box 2</div>
    <div class="css-sample-clear-right">clear: right</div>
    </div>

CSSコード

.css-sample-clear-right {
    clear: right;
}

表示結果

clear: both

clear: bothは、左右どちらかに浮動要素がある場合、それを避けて次の行に表示されます。これにより、要素が浮動要素の影響を受けずに、次の行に移動します。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box">Box 1</div>
    <div class="css-sample-box" style="float:right;">Box 2</div>
    <div class="css-sample-clear-both">clear: both</div>
    </div>

CSSコード

.css-sample-clear-both {
    clear: both;
}

表示結果

clear: none

clear: noneは、要素の前に浮動要素があっても、そのまま隣に並びます。この場合、clearプロパティの影響を受けません。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box">Box 1</div>
    <div class="css-sample-box">Box 2</div>
    <div class="css-sample-clear-none">clear: none</div>
    </div>

CSSコード

.css-sample-clear-none {
    clear: none;
}

表示結果

まとめ

clearプロパティを使用することで、要素が浮動要素と重ならないように制御できます。left, right, bothを適切に使い分けることで、レイアウトが崩れないように要素の配置をコントロールすることが可能です。また、clear: noneは、隣に並んで表示したい場合に使用されます。