CSSを学ぶ。floatプロパティの仕組みを学ぶ。

CSSを学ぶ。floatプロパティの仕組みを学ぶ。

floatプロパティは初心者がつまずくポイントです。

「floatプロパティの仕組みについて理解すれば、使いこなすことができるはず!」っていうことで今回は仕組みについて解説していきます。

floatプロパティの仕組み

floatは2つの処理を行なっていることを知っておく必要があります。

  • レイヤーを変える処理
  • 要素の流れを変える処理

それぞれの処理を交えながら、解説をしていきますね。

レイヤーを変える

CSSでは重なり(レイヤー)という概念があります。

floatは、そのレイヤーを上に浮かせる処理をしています。

回り込みの原理

この原理を知るために、以下のHTMLソースとCSSコードを準備しました。

HTMLコード

<!DOCTYPE HTML>
<html lang=”ja”>
<head>
 <meta charset=”UTF-8″>
 <title>ぱくぱくのCSS講座</title>
 <link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
 <div class=”box1″></div>
 <div class=”box2″></div>
 <div class=”box3″></div>
 <div class=”box4″></div>
</body>
</html>

CSSコード

.box1{
 background-color: red;
 width: 100px;
 height: 100px;
}
.box2{
 background-color: yellow;
 width: 100px;
 height: 100px;
}
.box3{
 background-color: blue;
 width: 100px;
 height: 100px;
}
.box4{
 background-color: green;
 width: 100px;
 height: 100px
}

ブラウザ画面

先程準備したCSSに『box1』へ『float: left;』を追加します。

.box1{
 background-color: red;
 width: 100px;
 height: 100px;

 float: left;

}
.box2{
 background-color: yellow;
 width: 100px;
 height: 100px;
}
.box3{
 background-color: blue;
 width: 100px;
 height: 100px;
}
.box4{
 background-color: green;
 width: 100px;
 height: 100px
}

これをブラウザで確認すると。。。

これは『回り込み』という現象です。

どのようなことが起きたのでしょうか。

これはそれぞれの要素の重なりに原因があります。

それでは今回『box1』に『float: left;』を記述することでどのようなことが起きたか解説します。

  1. 赤色に指定された『box1』は、floatプロパティによって上に浮かされます。
  2. 赤色に指定された『box1』は、left属性で左寄せされます。
  3. 浮かされたbox1の下に、黄色で指定された『box2』が下に来ます。

このような動きが『float: left;』によって起きていたのです。

要素の流れを変える

HTMLでは通常上から下に向かって描かれていきます。

floatはleft属性でその流れを、左から右に変える処理をします。

それでは『box2』へ『float: left;』を追加します。

.box1{
 background-color: red;
 width: 100px;
 height: 100px;

 float: left;

}
.box2{
 background-color: yellow;
 width: 100px;
 height: 100px;

 float: left;

}
.box3{
 background-color: blue;
 width: 100px;
 height: 100px;
}
.box4{
 background-color: green;
 width: 100px;
 height: 100px
}

これをブラウザで確認すると。。。

黄色で指定された『box2』が赤色で指定された『box1』の右側に来ています。

これは通常HTMLでは上から下に向かって配列される要素を、floatプロパティでleft属性によって左から順に配列する指定をした為です。

そして青色で指定された『box3』が赤色で指定された『box1』の下に回り込んだのは、、、

  1. 黄色に指定された『box2』が、floatプロパティによって上に浮かされます。
  2. 黄色に指定された『box2』が、left属性で赤色に指定された『box1』に続いて左寄せされます。
  3. 青色に指定された『box3』が、赤色に指定された『box1』下に回り込む。

このような現象が起きた為です。

回り込みを解除する(clearプロパティ)

回り込みを解除する為には、clearプロパティを使用します。

それでは実際にCSSへ記述してみましょう。

『box3』へ『clear: left;』を記述します。

.box1{
 background-color: red;
 width: 100px;
 height: 100px;

 float: left;

}
.box2{
 background-color: yellow;
 width: 100px;
 height: 100px;

 float: left;

}
.box3{
 background-color: blue;
 width: 100px;
 height: 100px;

 clear: left;

}
.box4{
 background-color: green;
 width: 100px;
 height: 100px
}

そしてこれをブラウザで確認すると。。。

青色で指定された『box3』が赤色で指定された『box1』の下に来ています。

これはclearプロパティ(clear: left;)によって、それ以前に記述されたfloatプロパティ(float: left;)の重なり(レイヤー)を無くす(clear)指定をした為です。

これによって重なりは解消され、赤色で指定された『box1』の下に、青色で指定された『box3』はHTMLで記述された通り、上から下の流れで下に配置されたということになります。

次の記事

前回の記事

HTMLを学ぶ。シリーズはこちら

CSSカテゴリの最新記事