ほんっとにはじめての HTML5 と CSS3

今回は、floatプロパティと clearプロパティについて。

floatプロパティは、要素を右か左に動かして、そのあとに続く他の要素を反対側に回り込ませることができます。
float は一度指定すると、その後に書いた要素にず〜っと影響し続けるんですが、その影響を終わらせるのが clearプロパティ。フロートをクリアするためのプロパティです。

float はけっこうクセがあるので、それを知らないまま使うとけっこう面倒なことになります（笑）
今回はそこらへんを順を追って説明していきます。
そして、float を使うなら Clearfix も知ってると絶対便利なので、それについても解説します。

1. floatプロパティの値
2. floatプロパティの特徴（けっこうクセがある）
   1. float指定すると暗黙的にブロックレベルになる
   2. floatを指定すると親要素に対して「浮く」
   3. floatは「後に続く要素」に影響を与える
   4. テキストの場合、あえて後に書く利用法もあります
   5. float指定された要素は 親の範囲内で浮動する
   6. floatさせるなら幅（width）を指定する
   7. floatを指定すると ず〜っと影響し続ける
3. clearプロパティの値
4. float指定を終わらせる clearプロパティ
   1. 親要素の高さ表示が変なのをなんとかする方法
5. 擬似要素 ::after を利用した Clearfix を使おう
6. 回り込んだテキストが中途半端な時に overflowで解決
7. clear以外でも floatを終わらせるプロパティがあります
   1. overflowプロパティ（overflow:auto または overflow:hidden）
   2. まだドラフトだけど「display: flow-root」というのが登場しています
8. floatじゃなくても横並びにできるCSSがあります

参考：
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
W3C Recommendation 07 June 2011, edited in place 12 April 2016 to point to new work
9 Visual formatting model ←これが W3Cの勧告の今のところの最新版みたいです。

floatプロパティの値

float（フロート）の日本語訳は 浮動ふどう。浮かせて動かすってイメージかな。
floatプロパティの値はシンプルで、実際に使うのは 左（ left ）か 右（ right ）だけ。

none	これがデフォルト値。フロートなしです。
left	要素は左に浮動し、そのあとの要素はこの要素の右側に回り込みます。
right	要素は右に浮動し、そのあとの要素はこの要素の左側に回り込みます。

値の継承	なし	適用できる要素	全要素。 ただし display: none な要素には無効。

floatプロパティの特徴（けっこうクセがある）

floatは <img>要素などの横にテキストを回り込ませるのが元々の使い方ですが、ブロックレベルの要素を 横並び にできるのでレイアウトにもよく利用されます。
ブロックレベルは普通は縦にしか並ばないけど、floatを利用すれば横に並ばせられるので。
（ただし、フロートじゃなくても「横並び」にできる指定は他にもあります。詳しくは記事の後半で）

ですが、float の特徴をあんまり把握しないで使うと、レイアウトが崩れちゃったという事態に...。
というわけで、その特徴を 順を追って見ていきましょう。

float指定すると暗黙的にブロックレベルになる

float を指定すると、その要素は暗黙的に「ブロックレベル」のレイアウトに使用することになるんだそうです。

display: inline-block の要素は、float を指定することで、display: block になり、
display: inline-table の要素は display: table になるそうです。
display: flex、display: inline-flex の要素は、そもそも float の対象外です（効きません）

ただし ここで注目すべきは、インラインな要素。

widthプロパティ のデフォルト値は「auto」です。
<div>要素、<p>要素などのブロックレベルでは、幅の指定をしなければ（width:autoなら）、width は親要素の中いっぱい（100％）になります。

しかし、インラインの要素（<span> <b> <strong> など）に float を指定すると、ブロックレベルにはなりますが、幅指定をしなければ（width:autoなら）、width は中身のテキストコンテンツの幅のままです。親の「100％」になったりしません。

インラインの要素は、float を指定すると性質的には display: inline-blockになるように思います。
（MDNでは display: inlineも display: block になると記載されていますが）
少なくとも「中身のコンテンツの幅」のままであることは覚えておこう。

floatを指定すると親要素に対して「浮く」

まずはこのサンプルから。<img>要素に float: left を指定しています。

上のサンプルのHTML

<div class="sample">
  <img src="sample.jpg" width="130" height="100">
  <p>テキスト</p>
</div>

上のサンプルのCSS

div.sample {
	margin:0;
    padding:10px;
    border:solid 1px #ccc}  /*←親要素に囲み罫を付けています*/
div.sample img {  /*←これが浮き輪の画像*/
	margin:0 10px 0 0;
    float:left}
div.sample p {
	margin:0;
    color:#4e968e}

margin:0 10px 0 0（6行目）はショートハンドです。右マージンが10px、他は0という指定です。
マージンのショートハンドについては【11-1】marginと marginのショートハンド をご覧ください。

次に、テキストの量をグッと減らしてみました。あれ？ 親要素の囲み罫が中に入ってきちゃった。

テキストを <p>要素ごと全部削除したらコレ。

親要素が崩壊しちゃいました。
親要素に「padding: 10px」を指定しているので、そのぶんのスペースは空いてますが、フロートさせた <img>要素の高さは無視されていますね。

これは、フロート指定された要素は 親要素にとって 幅や高さが無くなって 何もない状態と同じに扱われるから。文字通り 親から浮くと覚えておくとイイかも。

ですので 親要素の padding-bottom や border-bottom が 上の方に詰められちゃったんですね。

これをどうにかするには、親にある手続きをしなければなりません。
（それは後半で詳しく。説明の都合上、しばらくこの気持ち悪い状態のサンプルが続きますw）

floatは「後に続く要素」に影響を与える

次の特徴はコレ。
float は 後に続く要素に影響を与えるので、先に書かないと意味無いです。

float指定した <img>要素を <p>要素のあとに書くとこう↓　
テキストが横に並ばず、float指定された要素は下に押し出されてしまいます。

上のサンプルのHTML（float指定した要素をあとに書いても意味無い）

<div class="sample">
  <p>テキストを先に</p>
  <img src="sample.jpg" width="130" height="100">  <!-- ←float:leftを指定している要素-->
</div>

float: right でも同じ。右へ浮動させるので後に書きたくなりますが、この場合も floatさせたい要素を先に書かないと、下のサンプルのようになります。

<div class="sample">
  <p>テキスト</p>
  <img src="sample2.jpg" width="130" height="100" class="img_fright"> 
</div>

<style>
div.sample {margin:0; padding:10px; border:solid 1px #ccc}
div.sample img.img_fright {margin:0 0 0 10px; float:right}  /*←このimg要素の指定*/
div.sample p {margin:0}
</style>

float を指定した要素を先に書けばこのようになります。ホッとしますね（笑）

<div class="sample">
  <img src="sample2.jpg" width="130" height="100" class="img_fright"> <!-- ←float:rightを指定している要素-->
  <img src="sample.jpg" width="130" height="100">  <!-- ←float:leftを指定している要素-->
  <p>テキストを後に</p>
</div>

「float: rightを指定している要素」「float: leftを指定している要素」は どっちが先でも後でも同じ。

テキストの場合、あえて後に書く利用法もあります

<span>要素に float: right を指定して、段落内の一番最後に置くと、ひと言だけ右寄せにしたいとき便利です。（「続きを読む...」とか）

上のサンプルのHTMLとCSS

<div>
  <p>
  普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。...（略）
  <span style="float:right; color:red">ここだけ右寄せ</span>  <!--いちばん最後に-->
  </p>
</div>

この場合、<span>要素の幅が小さい（中身のコンテンツの幅）なので、親要素の崩壊も起きていません。
（なので clearプロパティ（後で説明します）を指定しなくても大丈夫。あまりオススメしないけど）

もとがインラインの要素の場合は、float を指定したらブロックレベルにはなるけど、幅はもとの性質のまま（中身のコンテンツの幅）です。
なので、中身のテキストがワンフレーズの場合は、サイズが小さいので、親にも、親の外の後続要素にも影響を及ぼせません。

ちなみに、float指定した <span>要素は、先頭に書いても、真ん中あたりで書いても、本来表示されるべき行の中で右か左に浮動します。

では、<span>要素内のテキストを増量してみると、やはりこうなる。
（親の崩壊を解決する方法は詳しくは後半で）

float指定された要素は 親の範囲内で浮動する

浮動する範囲は親要素の中の端っこか、他のfloatさせた要素に当たるまでです。

下のサンプルは、画像は2つとも float: left です。
最初の浮き輪の画像は、親要素の左端まで浮動しています（親には padding: 10px 指定しています）
2つめの気球の画像は、最初の浮き輪の画像に当たるまで浮動しています（<img>要素の右マージンは10px）

★ずっと親要素の囲み罫が変なままですが、後で解決させますので気にしないでください（笑）

親の幅がいっぱいになったら自動的に下に押し出されます。
下のサンプルで、親の幅に収まらなくなったら下に折り返して並ぶのがわかりますね。

このサンプルのボックスは全て float: right にしています。
float: right の並び方は右から順番なのもわかりますね。

<div class="sample">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
 <div>7</div>
</div>

<style>
div.sample {margin:0; padding:10px; border:solid 1px #ccc}
div.sample > div {
   float:right;
   margin:0 0 10px 10px;  /*←下と左のマージンが10px*/
   background:#9C9;
   text-align:center;
   padding:1em;
   width:3em;
   font-size:large}
</style>

floatさせるなら幅（width）を指定する

次は、<img>要素の float: left に加えて、<p>要素にも float: left を指定してみます。
すると、<p>要素が <img>要素の横に並ばずに 下に送られてしまいました。

これは、<p>要素に幅（width）の指定が無いから。

<img>要素は、最初から画像にサイズがあるので、要素の width属性・height属性や、CSSでサイズ指定をしてますよね。
<p>要素などの幅が決まってない要素だと、こっちでちゃんと幅を決めてあげないと、ブラウザは width: auto にするので親要素の中いっぱいの幅になります。
フロートしているので親から幅や高さを認識されず、そして「親の幅いっぱいの幅」になったため、ブラウザ的には、先にフロートしている要素の横に並ばせられず、その下に送るしかないんですね。

というわけで、floatさせるなら幅（width）を指定すると覚えておこう。
<span>要素とかで中のテキストが短い場合は、幅はその文字数分だから あえて幅指定は不要だけど。
そのほかの場合で floatがうまくいかない時「あ、幅の指定してないや」と気がつくことが肝要。

<p>要素に幅指定すると また横に並びました。
（両方とも浮動しているので、相変わらず親の囲み罫が変ですがw　もう少し我慢しててください）

<div class="sample">
  <img src="sample.jpg" width="130" height="100" class="img_fright">
  <p style="float:left; width:130px">テキスト</p>
</div>

<style>
div.sample {margin:0; padding:10px; border:solid 1px #ccc}
div.sample img {margin:0 10px 0 0; float:left}
div.sample p {margin:0}
</style>

ちなみに、レスポンシブサイトでは、幅をピクセルではなく％で指定する場合が多いので、2つのフロートさせた子要素の幅を 70％ と 30％ で指定したサンプルも作ってみました。

この場合、子要素に paddingも指定しているので、同時に box-sizing の指定も忘れずに。
padding や border を使ったら、box-sizing指定が無いと幅50％だとはみ出すから。
box-sizing については【10】ボックスモデル（margin, padding, border を使いこなそう）をご覧ください。

上のサンプルのHTML と CSS

<div class="sample">
 <div class="smpleft">left</div>
 <div class="smpright">right</div>
</div>

<style>
.smpleft, .smpright {
	-webkit-box-sizing: border-box;/*box-sizing*/
    box-sizing: border-box;
	margin:0;
	background:#FC9;
	text-align:center;
	padding:1em;
	font-size:large}
.smpleft {
	width:70%;
	background:#9C9;
	float:left}
.smpright {
	width:30%;
	float:right}
</style>

floatを指定すると ず〜っと影響し続ける

今度は 親要素の下に 別の要素を置いてみます。「フロートした子要素を囲む要素の下」です。
ここでは<h3>要素を置いてみました。

<div class="sample">
  <img src="sample.jpg" width="130" height="100"> <!-- floatしています-->
  <p>テキスト</p>
</div>

<h3>h3要素でタイトルを親要素の下に</h3>  <!-- ←親要素の下に入れています-->

すると、<h3>要素までもが <img>要素の横に回り込んじゃいます。なにこれ？

h3要素でタイトルを親要素の下に

これは、floatが 後に続く要素に対して右か左に浮動する指令だから。
親要素の外だろうが何だろうが 後続の要素に対してず〜っと影響し続けます。

floatは 自分で始めた仕事を 自分で終わらせられない 仕様なんです。
代わりにそれを担当するのが clearプロパティです。

clearプロパティの値

やっと clearプロパティの出番です。これは floatの指定をクリアする役割 です。

まずは clearプロパティの値を見てみましょう。
「左」「右」「両方」の値があるのですが、はっきり言って「両方（ clear: both ）」しか使わないかも。両方いっぺんにクリアできるからね。

none	これがデフォルト値。クリアなし。
left	前にある要素の左フロートの影響から要素を切り離し、下に押し出します。
right	前にある要素の右フロートの影響から要素を切り離し、下に押し出します。
both	左右両方のフロートの影響から要素を切り離し、下に押し出します。

値の継承	なし	適用できる要素	ブロックレベル要素

注意点は、clearプロパティはブロックレベル要素にしか適用されないこと。
floatは「全要素」が対象でしたが、clearは「ブロックレベルだけ」と覚えておこう（これが clearfix のときに大事になってきます）
あと、当たり前だけど float指定されてない要素に使用します。

float指定を終わらせる clearプロパティ

とにかく使ってみましょう。影響を受けたくない要素に clearプロパティを指定します。
先ほどのサンプルの <h3>要素に clear: left を指定。
<h3>要素はフロートから切り離されましたね。上マージン詰まってるけど、位置的にはイイよね。

h3要素でタイトル

<div class="sample">
  <img src="sample.jpg" width="130" height="100"> <!-- floatしています-->
  <p>テキスト</p>
</div>

<h3 style="clear:left">h3要素でタイトルを親要素の下に</h3>  <!-- clear:leftを指定-->

でも、フロートさせた要素がある親要素の囲み罫は変なままです。
これを、もうそろそろ どうにかしたいですね。

親要素の高さ表示が変なのをなんとかする方法

解決方法はこちら。
親の<div>内の最後に <div style="clear: left"></div> と入れます。
空の<div>要素に clear指定するんです。
（ブロックレベルなら <div>じゃなくてもOK。<span>に display: block って指定したやつでも）
<h3>要素の clear 指定はもう不要なので取ります。

<div class="sample">
  <img src="sample.jpg" width="130" height="100">  <!-- ←float:leftにした要素-->
  <p>テキスト</p>
  <div style="clear:left; margin:0; padding:0"></div>
</div>
<h3>h3要素でタイトル</h3>

h3要素でタイトル

親要素の囲み罫も、やっとまともな状態になりました。

これってこんな ↓ 理屈です。

親要素の最後の締めの位置に clear指定した要素がある状態を作ったので、親要素は、たとえフロートした要素の高さを認識できなくても、下のpadding や border を描くべき位置がわかるようになったんです。

擬似要素 ::after を利用した Clearfix を使おう

上の仕組みをもっとシンプルにしたのが Clearfix（クリアフィックス）と言われるもの。
これを知っているとメッチャ便利です。
これは 擬似要素「::after」を利用します。

擬似要素「::before」や「::after」は、指定した要素の内側に インライン要素としてコンテンツを生成します。

★擬似要素については、【3】id とか classって何？（セレクタの「種類」を知っておこう）でざっくりメモっています。
（コレ、たいして詳しくないよね。疑似要素や擬似クラスについては、いずれ ちゃんとまとめます）

さてこの 擬似要素「::after」を、先ほど「親要素の最後に空の<div>を入れて、clearを指定する」というのをやりましたが、あれと同じ構造にして使うのが clearfix。
そうすれば、わざわざ親要素の最後に <div> 〜 </div>とか書く手間が無くなって時短になるからね。

で、できたのがコレ。これが Clearfix（クリアフィックス）と呼ばれるコード。
昔はオールドIE対策（IE6 とか 7とか用）のために長いコードだったけど、今はこんなに短くてOK。
（ clearfix は下記のものだけじゃなく、いろいろな書き方があります。私が使ってるのは今のところコレってこと）

クリアフィックス（Clearfix）

.clearfix::after {
	content:'';
    display:table;
    clear:both}

1行目、クラス名は「clearfix」にしていますが好きな名前でOK。「cf」とかでも。

2行目は、疑似要素だけに使える contentプロパティの値を空っぽにしています。
（ クォーテーションマーク（'）で囲んだ中に半角スペースを入れたりせずに、何も無しにします）

3行目で、 displayプロパティを使ってブロックレベルにしています。
clearはブロックレベルにしか使えないけど、擬似要素はインラインなので 、こうしてブロックレベルにする必要があるんです。

display: table は display: block にしてもOK。
display: table なら、table内に中身（セル）が何にも無かったら、tableはぺったんこで何も表示しない特徴を利用します。
display: block でも同じ。「content:''」で中身無しにしてるので、高さがなくてぺったんこです。

そして、肝心の clear: both を指定（4行目）。
clear: both は、左右両方クリアしてくれるので、1つで万能だからね。

クリアフィックスは こんなふうに、親要素にクラスを指定して使います。
これで、この <div> の内側の最後の締めの位置（ </div>の直前）に「clear指定された、高さがないブロックレベルの疑似要素」が生成されるってわけ。素敵。

クリアフィックス（Clearfix）を親要素に指定した例。

<div class="sample clearfix">
  <img src="sample.jpg" width="130" height="100">
  <p>テキスト</p>
</div>

クラス（class）は、上のサンプルソースのように「半角スペース」で区切れば複数同時に何個でも指定できます。（id は1個だけしか無理）

親要素にクリアフィックスを指定した結果です。親の囲み罫がマトモになってますね。

上のサンプルのHTML

<div class="sample clearfix">
  <img src="sample.jpg" width="130" height="100">
  <p>テキスト</p>
</div>

上のサンプルのCSS

div.sample {  /*←囲み罫の付いた親要素*/
	margin:0;
    padding:10px;
    border:solid 1px #ccc}
div.sample img {  /*←浮き輪の画像*/
	margin:0 10px 0 0;
    float:left}
div.sample p {  /*←テキストのp要素*/
	margin:0;
    color:#4e968e}
.clearfix::after {  /*←クリアフィックス*/
	content:'';
    display:table;  /*← display:blockでもOK*/
    clear:both}

floatプロパティを使うときの鉄則は、
親要素で囲み、親要素の中でfloatを完結させること。
それには clearfix（クリアフィックス）を使うと時短だし便利です。

float と clear については以上です。
ここから先は、知ってて便利なネタ話です。

回り込んだテキストが中途半端な時に overflowで解決

前回の overflowプロパティでも紹介しましたが、
この↓ように、テキストが画像の下に中途半端に回り込むときに。

回り込ませるテキストの方に overflow:hidden または overflow:auto を指定すると、半端な回り込みをやめさせることができます。

上のサンプルのHTMLです。

<div class="sample clearfix">
  <img src="sample.jpg" width="130" height="100">
  <p>テキスト</p>
</div>

上のサンプルのCSSです。

div.sample {  /*←囲み罫の付いた親要素*/
	margin:0;
    padding:10px;
    border:solid 1px #ccc}
div.sample img {  /*←これが浮き輪の画像*/
	margin:0 10px 0 0;
    float:left}
div.sample p {
	margin:0;
    overflow:hidden;  /*←overflow:auto でも同じです*/
    color:#4e968e}
.clearfix::after {
	content:'';
    display:table;
    clear:both}

これ、昔から使ってきた裏ワザです。
overflow: hidden だと印刷時に切れたり、overflow: auto だと思わぬところにスクロールバーが出たりするかもなので、使うときはよく確かめてからでどうぞ。

clear以外でも floatを終わらせるプロパティがあります

「float といえば clear」とセットで覚えててイイんですが、clear以外でも floatを終わらせるプロパティがあります。

overflowプロパティ（overflow:auto または overflow:hidden）

floatさせた要素の親要素に、overflow:auto または overflow:hidden を指定すると、その親要素内でfloatの影響が終わります。

<div class="sample" style="overflow:hidden">  <!--←autoでも同じです-->
  <img src="sample.jpg" width="130" height="100">  <!-- ←float:leftにした要素-->
  <p>テキスト</p>
</div>

ただし、overflow:hidden を使うと印刷時に肝心なコンテンツが切られることがあるそうです。
また、overflow:auto だと、画像などのコンテンツが親より大きくなった幅の場合「スクロールバー」が出ちゃうので対策が必要。
ですので、やはり float のクリアはclearプロパティに任せたほうがイイと思う。

まだドラフトだけど「display: flow-root」というのが登場しています

W3Cのドラフト（草案）で、displayプロパティの新しい値 flow-root が登場しています。

参考：CSS Display Module Level 3 -- W3C Working Draft, 3 May 2017 | 2.2. Inner Display Layout Models

W3Cの flow-rootの解説は、こうなっています。
The element generates a block container box, and lays out its contents using flow layout.
It always establishes a new block formatting context for its contents.

display: flow-root を指定した要素は、常に新しいブロックフォーマットのコンテキストを確立する とあります。

これを親要素に指定すると、中の要素に floatを指定していても親要素内で完結させられる（clearfix を使った時と同じになる）ということみたい。
とにかく試してみます。まだドラフトですが、Chrome 58、Firefox 53 はすでに対応していました。

<div class="sample" style="display:flow-root">
  <img src="sample.jpg" width="130" height="100">  <!-- ←float:leftにした要素-->
  <p>テキスト</p>
</div>

これは簡単でイイですね。勧告されて普通に使えるようになったら Clearfix は不要になるね。

floatじゃなくても横並びにできるCSSがあります

さて、さんざん float について説明してきてアレなんですが、
最後に floatじゃなくても横並びにできる指定についても触れておきます。

ブロックレベルの要素は縦に並ぶのがデフォルト。これを横に並べたい時、以前は floatプロパティしか無かったんだけど、今は displayプロパティで、使えるものが増えました。
display: table、display: inline-block、display: flexなどが ブロックレベルを横に並べられます。

ページのレイアウトで使う時は、floatより displayプロパティのほうが使いやすい気がします。
float はクリアしなきゃだし、いろいろ細かいルールがあるので面倒くさいから。

それぞれの詳細については、下記リンクをご覧ください。
display: inline-blockについては【17-1】displayプロパティでボックスの表示形式を自由に変えよう
display: tableについては【17-3-1】display:tableでテーブル関連じゃない要素をテーブルっぽく
display: flexについては【18-1】Flexbox を使おう！（display:flexでFlexboxを作る）

display: flex は、各ブラウザがまだ部分的に未対応な仕様もあって使いにくいけど、
display: inline-block や display: table はもう充分使えるんじゃないかな。

ただし、float は大昔からある仕様なので、すっごい古いブラウザでも対応しているのが今のところの最大のメリット。オールドブラウザも対象にするなら float のほうがイイです。

次回予告

今回は float と clear を一度にやって盛りだくさんでしたね。

さて次回は、ちょっとメモで「Web開発ツール」について。
ブラウザ上で、よそのサイトや自分のサイトの CSSがどう効いているかを調べられる機能です。
これを知っていると格段に CSSの勉強が進むと思います。

関連記事

• 【23-2】重なり順のルールと 新しいスタックコンテキストができる条件
• 【23-1】要素の重なり順の上下関係を指定する z-indexプロパティ
• 【22-4】スクロールしていくとピタッと固定する position: sticky
• 【22-3】要素を固定位置に指定する position: fixed
• 【22-2】要素を絶対位置に指定する position: absolute
• 【22-1】位置指定の positionと top, right, bottom, leftプロパティ
• （ちょっとメモ）Web開発ツールでCSSがどう効いているか確認しよう
• 【21】floatプロパティと clearプロパティ。そして Clearfixについて
• 【20】overflowで、あふれた中身の表示方法を指定しよう
• 【19】visibility で表示か非表示かを指定しよう
• 【18-5】Flexboxの古い仕様とベンダープレフィックスまとめ
• （ちょっとメモ）Flexbox をシミュレーションできるサイト2件
• 【18-4】Flexboxの orderプロパティで表示順を自由に変えよう
• 【18-3】Flexbox内の縦（垂直）方向を揃えよう
• 【18-2】Flexbox内のボックスの配置方法を指定しよう