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

CSSの回り込みと解除のサンプルです。
このサンプルでは、floatとclearを使用します。

目次

float プロパティ

float : 値
説明
left   指定した対象を左に寄せ、その後の対象を右に回り込ませます。
right 指定した対象を右に寄せ、その後の対象を左に回り込ませます。
none 何もしない。(初期値)
値を継承しない

コード

3行目は、16行目に対してfloat:leftを指定しています。
16行目の文字のtest1が左に配置され、後続の17,18行目の文字のaaaとbbbが右に回り込みます。

<style>
#test1{
	float:left;
}
.c1 div{ 
	height:70px;
	width:200px;
	border: 1px solid #000;
	background-color:#E0FFFF;
	text-align: center;
}
</style>
</head>
<body >
<div class="c1">
	<div id="test1" >test1</div>
	<p class="c1">aaa</p>
	<p class="c2">bbb</p>
</div>

サンプル

上記コードの実行結果のイメージです。
test1が左に配置され、後続の文字のaaaとbbbが右に回り込んでいます。

 

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

clear プロパティ

clear : 値
説明
left   左側の対象に対する回り込みを解除します。解除された対象は下に移動します。
right 右側の対象に対する回り込みを解除します。解除された対象は下に移動します。
both 左右の対象に対する回り込みを解除します。解除された対象は下に移動します。
none 何もしない。(初期値)
値を継承しない

コード

3行目は、19行目に対してfloat:leftを指定しています。
6行目は、21行目に対してclear:leftを指定しています。
そのため、このクラスセレクタc2の回り込みは解除されます。

<style>
#test1{
	float:left;
}
.c2{
	clear:left;
}
.c1 div{ 
	height:70px;
	width:200px;
	border: 1px solid #000;
	background-color:#E0FFFF;
	text-align: center;
}
</style>
</head>
<body >
<div class="c1">
	<div id="test1" >test1</div>
	<p class="c1">aaa</p>
	<p class="c2">bbb</p>
</div>

サンプル

上記コードの実行結果のイメージです。clear:leftを指定したbbbの回り込みが解除されています。

 

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

関連の記事

CSS 要素の枠内の余白を指定するサンプル(padding)
CSS 要素の枠外の余白を指定するサンプル(margin)
CSS 幅と高さを指定するサンプル(widthとheight)
CSS テーブルの枠線を重ねる/離すサンプル(border-collapse)
CSS テーブルの枠線の間隔を指定するサンプル(border-spacing)
CSS ボックスの配置のサンプル(positionのrelative)
CSS ボックスの配置のサンプル(positionのabsolute)
CSS ボックスの配置のサンプル(positionのfixed)
CSS 要素の重なる順番を指定するサンプル(z-index)
CSS 幅と高さのパディング、ボーダーの表示方法を指定するサンプル(box-sizing)
CSS ボーダーの表示方法を指定するサンプル(border)
CSS 要素のボックスの種類を指定するサンプル(display)



△上に戻る