floatとclear/回り込みと解除

floatプロパティは左右への回り込み、clearは回り込みの解除を指定します。

説明

 floatは左への回り込みや右への回り込み、clearはそれを個別に解除、又は一括して解除出来ます。

floatとclear説明

構文

 floatプロパティの構文は以下の通りです。

float: 回り込み方法;

 回り込み方法の指定は以下が出来ます。

【widthでの幅の指定】
回り込み方法 説明
left 自身が左に回り込む
right 自身が右に回り込む
none 設定なし(デフォルト)

 clearプロパティの構文は以下の通りです。

clear: 解除方法;

 解除方法の指定は以下が出来ます。

【widthでの幅の指定】
回り込み方法 説明
left leftだけ解除
right rightだけ解除
both rightとleft両方解除
none 設定なし(デフォルト)

left利用例

 floatでleftを指定する利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

.t1 {
float: left;
}

.t2 {
clear:left;
}

<div class="t1">left1つ目</div>
<div class="t1">left2つ目</div>
<div class="t1">left3つ目</div>
<div class="t2"></div>

 上記を表示すると以下になります。尚、分かり易さのため、背景を付けています。

left1つ目
left2つ目
left3つ目

 各ボックスが左に回り込み、その次のボックスが右に表示されます。2つ目のボックスも左に回り込んでいるため、3つ目のボックスは更に右に表示されます。

 <div class="t1"></div>で回り込みを解除しています。解除しないと以降も回り込みを続け、ページ全体のレイアウトが崩れる可能性があります。

 尚、HTMLを以下のように2つ目で解除を入れてみます。

<div class="t1">left1つ目</div>
<div class="t1">left2つ目</div>
<div class="t2"></div>
<div>3つ目</div>

 上記を表示すると以下になります。尚、分かり易さのため、背景を付けています。

left1つ目
left2つ目
left3つ目

 この場合、3つ目のボックスは回り込みが解除されているため、下に表示されます。

right利用例

 floatでrightを指定する利用例は以下の通りです。

.t1 {
float: right;
}

.t2 {
clear:right;
}

<div class="t1">right1つ目</div>
<div class="t1">right2つ目</div>
<div class="t1">right3つ目</div>
<div class="t2"></div>

 上記を表示すると以下になります。尚、分かり易さのため、背景を付けています。

right1つ目
right2つ目
right3つ目

 各ボックスが右に回り込み、その次のボックスが左に表示されます。2つ目のボックスも更に右に回り込んでいるため、3つ目のボックスは更に左に表示されます。

leftとright同時利用例

 floatでleftとrightを同時に利用する例は以下の通りです。

.t1 {
float: left;
}

.t2 {
float: right;
}

.t3 {
clear:both;
}

<div class="t1">left1つ目</div>
<div class="t2">right2つ目</div>
<div class="t1">left3つ目</div>
<div class="t2">right4つ目</div>
<div class="t3"></div>
<div>5つ目</div>

 上記を表示すると以下になります。尚、分かり易さのため、背景を付けています。

left1つ目
right2つ目
left3つ目
right4つ目
5つ目

 各ボックスが順番に左、右と回り込み、clear:bothで両方の回り込みを解除した後は下に配置されています。

補足

 親ボックスに幅が指定されていると幅に達した時点で折り返して表示されます。

・項目1
・項目2
・項目3
・項目4

 上記では点線の枠の幅をwidthで200pxに指定しています。又、float:leftを指定している各ボックスはwidthで100pxに指定をしています。

 このため、200px以上になる3つ目から解除しなくても折り返して表示されています。

 floatは様々な要素に指定出来るため、これを利用して2段組みの一覧等を作成出来ます。

関連ページ

・ホームページ作成「ボックスのまとめ

 floatやclearだけでなく、marginやpadding、横幅、背景、枠線等、ボックス全体の説明をしています。

・ホームページ作成「スタイルシートの定義方法

 外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)