【CSS】floatが効かない（横並びにならない）原因と解決方法

float:leftを使うと要素を横並べできます。

「でもfloat:leftを使ったのに横並べできてない!?」

CSSのfloatが効かない（横並びにならない）原因と解決方法を解説します。

【原因】合計横幅が100%を超えているから

下記は「float:left」を指定した上でそれぞれwidthを60％と70%にした例です。

「float:left」を指定しているのに横並びできていません。

<style>
.example{
    border: 1px solid #333;
    overflow: hidden;
    background: #c3c9f7;
}
.example-l{
    float: left;
    /*コレ*/width: 60%;
    border: 1px solid #333;
    padding: 10px;
    background: #ffa9a9;
}
.example-r{
    float: left;
    /*コレ*/width: 70%;
    border: 1px solid #333;
    padding: 10px;
    background: #9cedce;
}
</style>

<div class="example">
    <div class="example-l">width: 60%</div>
    <div class="example-r">width: 70%</div>
</div>

floatは「横に入るだけの空間があれば横に並べる」要素です。

上記の場合は60%+70%で100%を超えており、横に入るだけの空間がないため横並びしません。

横並びしたいのであれば横幅の合計値が親の幅を超えないようにしましょう。

【原因2】borderとpaddingはwidthに含まれないから

widthの合計は100%以内なのに横並べにならないのであれば、borderとpaddingを忘れています。

<style>
.example2{
    border: 1px solid #333;
    overflow: hidden;
    background: #c3c9f7;
}
.example2-l{
    float: left;
    /*コレ*/width: 30%;
    border: 1px solid #333;
    padding: 10px;
    background: #ffa9a9;
}
.example2-r{
    float: left;
    /*コレ*/width: 70%;
    border: 1px solid #333;
    padding: 10px;
    background: #9cedce;
}
</style>

<div class="example2">
    <div class="example2-l">width: 30%</div>
    <div class="example2-r">width: 70%</div>
</div>

borderとpaddingはwidthに含まれません。

よって横幅は、(border-left-width)+(padding-left)+(width)+(padding-right)+(border-right-width)の合計になります。

もしmarginも指定していれば、margin-leftとmargin-rightも加わります。

【解決方法】box-sizing:border-boxを指定する

box-sizing:border-boxを指定すると、borderとpaddingがwidthに含まれます。

これでようやく横並びになりました。

<style>
.example3{
    border: 1px solid #333;
    overflow: hidden;
    background: #c3c9f7;
}
.example3-l{
    float: left;
    /*コレ*/width: 30%;
    /*コレ*/box-sizing:border-box;
    border: 1px solid #333;
    padding: 10px;
    background: #ffa9a9;
}
.example3-r{
    float: left;
    /*コレ*/width: 70%;
    /*コレ*/box-sizing:border-box;
    border: 1px solid #333;
    padding: 10px;
    background: #9cedce;
}
</style>

<div class="example3">
    <div class="example3-l">width: 30%</div>
    <div class="example3-r">width: 70%</div>
</div>

なお、box-sizing:border-boxを指定しても、marginは含まないので注意してください。

widthやpaddingの関係について詳しくはこちら↓

【解決方法2】display:flexに切り替える

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

<style>
.example4{
    /*コレ*/display: flex;
    border: 1px solid #333;
    background: #c3c9f7;
}
.example4-l{
    width: 30%;
    border: 1px solid #333;
    padding: 10px;
    background: #ffa9a9;
}
.example4-r{
    width: 70%;
    border: 1px solid #333;
    padding: 10px;
    background: #9cedce;
}
</style>

<div class="example4">
    <div class="example4-l">width: 30%</div>
    <div class="example4-r">width: 70%</div>
</div>

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

上記はbox-sizing:border-boxを指定していませんが、崩れていませんよね？

floatは横幅が少しずれるとすぐ崩れて縦並びになってしまいますが、display:flexなら子要素の横幅の合計が親の幅を超えていても、自動で再計算して収まるようにしてくれます。

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

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

【原因3】clear:bothに問題があるから

floatとセットで使うclear:bothもヒトクセあります。

clear:bothに問題がないか下記記事を確認してみてください。

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

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

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

【まとめ】floatが効かない原因

合計横幅が100%を超えているから

横並びする要素の横幅合計値が親の幅を超えないように再調整しましょう。

widthの合計が100%以内の場合、borderとpaddingはwidthに含まれないから

box-sizing:border-boxを指定すると、borderとpaddingをwidthに含めることができます。

そもそも崩れやすいfloatを使わず、崩れないdisplay:flexで横並びしましょう。

以上、floatが効かない（横並びにならない）原因と解決方法でした。