【CSS】floatの基礎知識・使い方徹底解説（サンプルコード付き）

こんにちは！
「要素の横並びってどうやるの・・？」「floatが上手くいかない・・・」「float・clearを実践的に使えるようになりたい・・！」

要素の横並びは、初心者web制作者にとって、つまずいてしまう最初のポイントではないでしょうか？

横並びをする事ができなければ、配置を思うようにする事ができません。

今回は初心者の方向けに、「float」「clear」について詳しく解説していきます。

float

floatとは、指定した要素を横並びにできるプロパティです。

意図的な横並びを指定しない限り基本的には、ブロック単位の縦並びで表示されます。
しかしウェブ制作をしていると、横並びにしたい事は数多く出てきます。

floatの書き方

●基本記述
セレクタ{
float:値;
}

セレクタに、横並びにしたい要素を指定します。

指定できる値

値	内容
left	要素を左寄せにする
right	要素を右寄せにする
none	初期値。横並び解除。

floatを指定

left（左寄せ）

サンプルコード表示結果

HTMLサンプルコード

<div class="red">red</div>
<div class="blue">blue</div>
<div class="green">green</div>

CSSサンプルコード

.red {
   height: 150px;             
   width: 150px;              
   background-color: red;
   text-align: center;   
   line-height: 150px; 
   color: #ffffff;
   float:  left;
}
.blue {
   height: 150px;             
   width: 150px;  
   background-color: blue;
   text-align: center;   
   line-height: 150px; 
   color: #ffffff;
   float:  left;
}
.green {
   height: 150px;             
   width: 150px;  
   background-color: green;
   text-align: center;   
   line-height: 150px; 
   color: #ffffff;
   float:  left;
}

※解説
赤と青の緑の要素を「左寄せ」の横並びにしたいので、横並びにしたい要素「.red」「.blue」「.green」にfloat: left;を指定し横並びにしています。

right（右寄せ）

サンプルコード表示結果

HTMLサンプルコード

<div class="red">red</div>
<div class="blue">blue</div>
<div class="green">green</div>

CSSサンプルコード

.red {
   height: 150px;             
   width: 150px;              
   background-color: red;
   text-align: center;   
   line-height: 150px; 
   color: #ffffff;
   float: right;
}
.blue {
   height: 150px;             
   width: 150px;  
   background-color: blue;
   text-align: center;   
   line-height: 150px; 
   color: #ffffff;
   float:  right;
}
.green {
   height: 150px;             
   width: 150px;  
   background-color: green;
   text-align: center;   
   line-height: 150px; 
   color: #ffffff;
   float:  right;
}

※解説
赤と青の緑の要素を「右寄せ」の横並びにしたいので、横並びにしたい要素「.red」「.blue」「.green」にfloat: right;を指定し横並びにしています。

none（初期値、横並び解除）

「float: none;」は初期値であり、横並びにしているfloatを解除することもできます。

例えば、PC画面では横並びにしたい、でもスマホ画面では横並びを解除して、縦並びにしたい。
そんな時、スマホに「float: none」を指定することで横並びを解除する事ができます。

文字の回り込み

サンプルコード表示結果

HTMLサンプルコード

<div class="red">red</div>
   <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト
      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキト
      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

CSSサンプルコード

.red {
   height: 150px;            
   width: 150px;             
   background-color: red;
   text-align: center;  
   line-height: 150px;
   color: #ffffff;
   float: left;
   margin-right: 10px;
   margin-bottom: 10px;
}

※解説
回り込み表示させたい文章を要素直下に記述し、要素に「float」を指定する事で文書を回り込みさせる事ができます。

floatの注意点

ここまでは、簡単に横並びにする事ができましたが、floatには注意点があります。

注意点１（floatの回り込み）

floatの回り込みとは？

floatプロパティは、要素が浮いた状態を作っています。
floatを指定している要素と指定していない要素が混じると、浮いた状態の要素に、
浮いていない（そのまま）の要素が下に周り込むといった現象が起きます。

例えば赤、青、緑の要素3点

赤と青だけに「float」を指定すると、
下記のように緑色が見えなくなりました。
これは赤と青の要素が浮いた下に緑の要素が隠れてしまっている為です。

赤の下に緑が隠れている、これがfloatによる回り込みです。
floatの回り込みを解除する方法があります。

floatの回り込み解除

floatの回り込みを解除するには「clear」プロパティを使用します。

●clearの記述方法
セレクタ{
clear: 値；
}

回り込みを防ぎたい要素をセレクタに指定し、値を指定する事で回り込みを防ぐ事ができます。

指定できる値

値	内容
both	左右の回り込み解除
left	左寄せの回り込み解除
right	右寄せの回り込み解除

指定できる値は、３点ありますが基本的には、「both」のみを使用します。
片方だけでなく左右に使用でき、left rightどちらの指定にも対応できるからです。

実際に赤、青、緑の3点のうち「赤」「青」の2点だけに「float」を指定し回り込みを解除してみます。

サンプルコード表示結果

HTMLサンプルコード

<div class="red">red</div>
<div class="blue">blue</div>
<div class="green">green</div>

CSSサンプルコード

.red {
	height: 150px;             
	width: 150px;              
	background-color: red;
	text-align: center;   
	line-height: 150px; 
	color: #ffffff;
	float:  left;
 }
 .blue {
	height: 150px;             
	width: 150px;  
	background-color: blue;
	text-align: center;   
	line-height: 150px; 
	color: #ffffff;
	float:  left;
 }
 .green {
	height: 150px;             
	width: 150px;  
	background-color: green;
	text-align: center;   
	line-height: 150px; 
	color: #ffffff;
	clear: both;
 }