【CSS】clear:bothが効かない原因と解決方法

clear:bothは主にfloatとセットで使うCSSです。

これを使うとfloatの効果をリセットできます。

「clear:bothを使ったのにfloatが変になってる!?効いてないの!?」

clear:bothが効かない原因と解決方法を解説します。

完成イメージ(成功例)

floatを使って2つの要素を横並べし、その下には縦に置かれる要素があるものとします。

<style>
.example{
    border: 1px solid #333;
    background: #c3c9f7;
    padding: 1%;
}
.example-l{
    float: left;
    width: 30%;
    box-sizing:border-box;
    border: 1px solid #333;
    padding: 10px;
    background: #ffa9a9;
}
.example-r{
    float: left;
    width: 60%;
    box-sizing:border-box;
    border: 1px solid #333;
    padding: 10px;
    background: #9cedce;
}
.example-f{
    border: 1px solid #333;
    padding: 10px;
    background: #9cceed;
    margin-top: 20px;
}
</style>

<div class="example">
    <div class="example-l">左のfloat</div>
    <div class="example-r">右のfloat</div>
    <div style="clear: both"></div>
</div>
<div class="example-f">footer</div>

上記のようにならない原因を見ていきます。

【原因1】floatを指定した要素にclear:bothを設定している

floatを指定した要素にclear:bothを指定するとうまく効きません。

下記は「右のfloat」にclear: bothを指定した例です。

「右のfloat」にはfloatが指定されています。

html(CSSは同じ)

<div class="example">
    <div class="example-l">左のfloat</div>
    <div class="example-r" style="clear: both">右のfloat</div>
</div>
<div class="example-f">footer</div>

正しくはfloatの最後の弟要素にclear:bothを指定しましょう。

<div class="example">
    <div class="example-l">左のfloat</div>
    <div class="example-r">右のfloat</div>
    <div style="clear: both"></div><!--←ここに指定-->
</div>
<div class="example-f">footer</div>

【原因2】最後のfloatの弟要素に設定していない

「clear:both」をfloatの後の要素に設定しようと思い、footerに設定した例です。

floatを囲った親要素の高さが0になる上、footerのmarginがうまく効かなくなっています。

html(CSSは同じ)

<div class="example">
    <div class="example-l">左のfloat</div>
    <div class="example-r">右のfloat</div>
</div>
<div class="example-f" style="clear: both">footer</div>

最後のfloatの弟要素にカラの要素を用意しそれにclear:bothを指定しましょう。

<div class="example">
    <div class="example-l">左のfloat</div>
    <div class="example-r">右のfloat</div>
    <div style="clear: both"></div><!--←ここに指定-->
</div>
<div class="example-f">footer</div>

【原因3】floatの方に問題あり

clear:bothではなくfloatの使い方に問題がある可能性があります。

下記記事を確認してみてください。

その他の原因　記述ミスなど

スペルミスや記号のミス、CSSの優先順位のミスなどケアレスミスの可能性があります。

下記記事を参考に見直してみてください。

【回避方法1】clear:bothを使わないで親要素にoverflow:hiddenを使う

そもそもclear:bothを使わなければ「clear:bothが効かない」という状況にならないわけです。

floatを指定した要素の親要素に「overflow:hidden」を使ってもfloatをリセットできます。

<div class="example" style="overflow: hidden">
    <div class="example-l">左のfloat</div>
    <div class="example-r">右のfloat</div>
</div>
<div class="example-f">footer</div>

【回避方法2】floatを使わないでdisplay:flexを使う

そもそもfloatを使わなければ「clear:bothが効かない」という状況にならないわけです。

下記はfloatを使わず「display:flex」で横並びにした例です。

<style>
.example2{
    /*コレ*/display: flex;
    border: 1px solid #333;
    background: #c3c9f7;
    padding: 1%;
}
.example2-l{
    width: 30%;
    box-sizing:border-box;
    border: 1px solid #333;
    padding: 10px;
    background: #ffa9a9;
}
.example2-r{
    width: 60%;
    box-sizing:border-box;
    border: 1px solid #333;
    padding: 10px;
    background: #9cedce;
}
.example-f{
    border: 1px solid #333;
    padding: 10px;
    background: #9cceed;
    margin-top: 20px;
}
</style>

<div class="example2">
    <div class="example2-l">左</div>
    <div class="example2-r">右</div>
</div>
<div class="example-f">footer</div>

display:flexは子要素の位置調整をするCSSです。

display:flexならclear:bothもoverflow:hiddenもいりません。

floatは扱いが難しいためdisplay:flexで横並びにすることを強くオススメします。

display:flexについて詳しくはこちら↓

【まとめ】clear:bothが効かない原因と解決方法

1. floatを指定した要素にclear:bothを設定している
2. 最後のfloatの弟要素に設定していない

【解決方法】最後のfloatの弟要素にカラの要素を用意しそれにclear:bothを指定しましょう。

【回避方法】横並びをするなら「display:flex」を使うことを強くオススメします。

以上、clear:bothが効かない原因と解決方法でした。