CSSのfloatプロパティの基本

CSSのfloatプロパティは、初心者の方が覚えるのに苦労する部分かもしれません。仕組みがわかってしまえば難しいことはないのですが、floatを使うことでレイアウトが崩れてしまったり、親要素の背景が無くなってしまったりと問題が発生しやすい部分です。

floatプロパティはその要素を左右どちらかに寄せたり、画像に文章を回り込ませる時などに使用します。CSSでWebサイトを作る時には良く使うプロパティですので必ず覚えておきましょう。

floatの基本

image02

グレー背景の部分が親要素でその上にAとBのBoxがあります。Aは「float:left;」Bは「float:right;」を指定しています。「float:left;」は左寄せ、「float:right;」は右寄せになります。

.box_a {
    width: 200px;
    height: 100px;
    float: left;
    }  
.box_b {
    width: 200px;
    height: 100px;
    float: right;
    }

実際にCSSを書くとこのようになります。aとbはどちらを先に書いてもOKです。

image01

AもBも「float:left;」を指定した場合はこのようになります。

image03

HTMLはそのままでも、AとBのfloatを逆にするとAとBが入れ替わります。

今回は2つのBoxしかありませんが、ABC3つのBoxに対して「float:left;」を指定することもできます。

ABCの3つのBoxを横に並べ、それぞれの余白を均等にしたい場合は、AとBを「float:left;」にして、Cを「float:right;」にして、AとBに対して、「margin-right」で余白を取るなどの方法を使います。

親要素の高さを指定しない場合

image04

子要素となるABの高さが一定ではなく、グレー背景部分の親要素の高さを指定できない場合、このように親要素の高さがなくなり背景が表示されなくなってしまいます。

floatというのは左右に寄せているだけではなく、浮かせて寄せているイメージです。内包する子要素にfloatがかかると内包する要素が浮いている状態になり、親要素の高さが無くなります。

対処法としては、親要素に高さを指定してたり、親要素にもfloatを指定することで高さがある状態になりますが、floatを解除する事も可能です。

»floatを解除する方法のまとめ

やり方は色々とありますので、自分のやりやすい方法を選択してください。ちなみに私は、floatを解除せずに親要素にもfloatをかけてしまいます。

画像に文章を回りこませる方法

image04

こんな感じに、画像に文章を回り込ませる時にもfloatを使います。

<div class="gazo">
<p><img src="../img/01.jpg" width="200" height="150">今日は4/1なのでエイプリルフールということで・・・・</p>
</div>

このようなHTMLになっている場合、imgに対してfloatをかければOKです。

.gazo img{
    float: left;
    }

これだけで、画像の後に書いた文章が画像の横に回り込むようになります。floatをrightにすれば文章は左に回り込みます。

floatをかけることで、その前後の関係のない要素が回りこんできてしまうことがありますが、回りこませたくない要素がある場合には、その下の要素に対して「clear: both;」を指定するのが便利です。

h3{
    clear: both;
    }

例えばこのように書けば、h3は「width」を指定しなくても他の要素に回り込みません。「clear: both;」もfloatと共に良く使うプロパティですので覚えておきましょう。

管理人イチオシのレンタルサーバー

当サイトでも使っているエックスサーバーは、ディスク容量が200Gと大きく、MySQLが50個まで使えますので、1つの契約でいくつものサイトを運営することができます。

転送量が月2,000G、メモリ192Gと他の格安サーバーでは見られないスペックとなっており、アクセス数の多いサイトや複数のWordPressサイトを運営するのにも向いています。

自動バックアップと電話サポートが付いているので、初心者の方でも安心!

エックスサーバーでは無料SSLが利用できます。Googleはhttpsのサイトを評価する傾向があり、今後はSSL化が必須になってくるでしょう。無料SSLは簡単に導入できるのでとても助かっています。

エックスサーバーの公式サイトへ

サブコンテンツ

このページの先頭へ