【CSS入門】floatの使い方を理解する | 右・左の回り込みとfloatを解除する方法

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、floatの使い方、右・左の回り込みとfloatを解除する方法について解説します。

1 CSSのfloatの使い方を理解する
2 SampleCode全文とHTML実行イメージ
3 おすすめ書籍(HTML&CSS編)
4 Twitterやってます！Follow Me！
5 最近の投稿

CSSのfloatの使い方を理解する

floatとは？

floatは、指定した要素を浮動化（浮いた状態）にさせ、右や左に配置することができます。

つまり、Block要素を、横並びにするときに「 float 」が役立ちます。

横並びにする際に使用するfloatプロパティの値は、leftとrightのどちらかです。

要素を左に寄せたいときはleft、右に寄せたいときはrightを使用します。

要素を左に回り込ませる(左側に横並びになる) [ float: left ]

[ float: left; ]を設定すると、縦並びになっていた要素を、左側から順番に横並びにすることができます。

/* [ float: left ] の設定によって、指定された要素は、左に回り込む */
float: left;

要素を右に回り込ませる(右側に横並びになる) [ float: right ]

[ float: right; ]を設定すると、縦並びになっていた要素を、右側から順番に横並びにすることができます。

/* [ float: right ] の設定によって、指定された要素は、右に回り込む */
float: right;

floatを解除する方法 [ clear: both ]

floatによる回り込みを解除するには、回り込む要素に対してclearプロパティを使います。

leftとrightのどちらも [ clear: both; ] でfloat効果を解除することができます。

/* [ float: right ] と [ float: left ] どちらも解除する  */
clear: both;

SampleCode全文とHTML実行イメージ

SampleCodeとHTML実行イメージは、次のとおりです。

Block要素は、横方向に通常積み上がります。

それに対して、[ float: left; ] を指定した要素たちは、左側に順に並んでいき、

[ float: right; ] を指定した要素たちは、右側に順に並んでいきます。

<style>

.box1{
    background-color: red;
    width:200px;
    height:100px;
}
.box2{
    background-color: blue;
    width:200px;
    height:100px;
}
.box3{
    background-color: chartreuse;
    width:200px;
    height:100px;
}

.left{
    /* [ float: left ] の設定によって、指定された要素は、左に回り込む */
    float: left;
}

.right{
    /* [ float: right ] の設定によって、指定された要素は、右に回り込む */
    float: right;
}

.clear {
    /* [ float: right ] と [ float: left ] どちらも解除する  */
    clear: both;
}

</style>

<h2>Block要素は、縦方向に積み上がる</h2>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>


<h2>[ float: left; ] Block</h2>
<div class="box1 left"></div>
<div class="box2 left"></div>
<div class="box3 left"></div>


<h2 class="right">[ float: right; ] Block</h2>
<div class="box1 right"></div>
<div class="box2 right"></div>
<div class="box3 right"></div>