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;』を記述することでどのようなことが起きたか解説します。
- 赤色に指定された『box1』は、floatプロパティによって上に浮かされます。
- 赤色に指定された『box1』は、left属性で左寄せされます。
- 浮かされた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』の下に回り込んだのは、、、
- 黄色に指定された『box2』が、floatプロパティによって上に浮かされます。
- 黄色に指定された『box2』が、left属性で赤色に指定された『box1』に続いて左寄せされます。
- 青色に指定された『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を学ぶ。シリーズはこちら
