CSS 回り込みと解除のサンプル(floatとclear)

nas

CSSの回り込みと解除のサンプルです。

目次

floatプロパティの動き

イメージ

floatプロパティを使用したときのイメージです。

test1のボックスにfloat:leftを指定しました。
test1のボックスが左に配置され、後続の文字のaaaとbbbが右に回り込みます。

コード

上記イメージのコードです。

<style>
#main{
	float:left;
	height:70px;width:200px;
	border:1px solid #000;
	background-color:#E0FFFF;
	text-align:center;
}
</style>

<div id="main" >test1</div>
<p>aaa</p>
<p>bbb</p>

3行目は、11行目に対してfloat:leftを指定しています。

float:leftを指定しない場合

3行目のfloat:leftを指定しない場合は、以下のよう縦に並びます。

float:rightを指定した場合

3行目をfloat;rightとすると、
test1が右に配置され、後続のaaaとbbbが左に回り込みます。

 

clearプロパティの動き

イメージ

clearプロパティを使用したときのイメージです。

test1のボックスにfloat:leftを指定しました。
bbbにclear:leftを指定しました。
test1のボックスが左に配置され、後続の文字のaaaが右に回り込み、clear:leftを指定したbbbの回り込みが解除されています。(回り込んでいません)

コード

上記イメージのコードです。

<style>
#main{
	float:left;
	height:70px;width:200px;
	border:1px solid #000;
	background-color:#E0FFFF;
	text-align:center;
}
.p2{
	clear:left;
}
</style>

<div id="main" >test1</div>
<p  class="p1">aaa</p>
<p  class="p2">bbb</p>

3行目は、14行目に対してfloat:leftを指定しています。
10行目は、16行目に対してclear:leftを指定しています。

10行目をclear:bothとしても結果は同じになります。
clear:rightとした場合は、回り込みは解除されません。

 

overflow:hiddenでfloatを解除する

floatした要素は、親要素から高さを認識できなくなります。
親要素にoverflow:hiddenを使用すると親要素から高さを認識できるようになります。

イメージ

サンプルとして親のボックス(main)とその子のボックス(aaaとbbb)があり、その下にfooterのボックスがあるとします。

子のボックスのaaaにfloat:leftをbbbにfloat:rightを指定すると
aaaとbbbが浮いて(float)、親のボックスが子のボックスの高さを認識できなくなります。
その結果、以下のようにfooterのボックスが上まできてしまいます。

親のボックスのmainにoverflow:hiddenを追記するとmainのボックスは、浮いた(float)のボックスの高さを認識するので、その後にfooterが表示されます。

コード

上記イメージのコードです。

<style>
.main{
	overflow:hidden;
	width:200px;background-color:#E0FFFF;
}
.sub1{
	float:left;
	width:70%;
	height:100px;
	background:AntiqueWhite;
}
.sub2{
	float:right;
	width:25%;
	background:AntiqueWhite;
}
.footer{width:200px;background:LightSalmon;}
</style>

<div class="main">
	<div class="sub1">aaa</div>
	<div class="sub2">bbb</div>
</div>
<div class="footer">footer</div>

3行目は、overflow:hidden指定しています。

 

clearfixでfloatを解除する

上記コードのoverflow:hiddenの代わりにclearfixでもfloatを解除でき同じ見た目になります。

コード

clearfixを使用するサンプルです。

<style>
.main{width:200px;background-color:#E0FFFF;}

.clearfix::after {
	content: "";
	display: block;
	clear: both;
}
.sub1{
	float:left;
	width:70%;
	height:100px;
	background:AntiqueWhite;
}
.sub2{
	float:right;
	width:25%;
	background:AntiqueWhite;
}
.footer{width:200px;background:LightSalmon;}
</style>

<div class="main clearfix">
	<div class="sub1">aaa</div>
	<div class="sub2">bbb</div>
</div>
<div class="footer">footer</div>

4-8行目は、clearfixです。定番の書き方です。
4行目は、afterでcontentがなにもないブロック要素をclearfixクラスの要素の後ろに追加し、そこでclear bothを行ってfloatを解除しています。

関連の記事

CSS ボックスの配置のサンプル(positionのrelative)
CSS ボックスの配置のサンプル(positionのabsolute)
CSS ボックスの配置のサンプル(positionのfixed)
CSS 要素の重なる順番を指定するサンプル(z-index)
CSS 要素のボックスの種類を指定するサンプル(display)

△上に戻る