【float】ボックスの配置

floatプロパティでボックスを寄せて配置する

floatプロパティを使用すると、ボックスを左や右に寄せて配置し、他の要素のボックスが回り込むように配置することができます。

ブロックレベルの要素同士は、通常横に並べることはできません。
しかし、floatプロパティを使用すると、ブロックレベルの要素を横に並べることもできます。

floatプロパティには、下記のキーワードが指定できます。

• none
• left
• right

none

noneはfloatプロパティの初期値で、ボックスを寄せずに配置します。

<div style="float: none; width: 100px; height: 100px; background-color: #ccccff;">ひとつめのdiv要素</div>
<div style="float: none; width: 100px; height: 100px; background-color: #ffcccc;">ふたつめのdiv要素</div>

left

floatプロパティにleftを指定すると、ボックスを左に寄せて配置します。

<div style="float: left; width: 100px; height: 100px; background-color: #ccccff;">ひとつめのdiv要素</div>
<div style="float: left; width: 100px; height: 100px; background-color: #ffcccc;">ふたつめのdiv要素</div>

right

floatプロパティにrightを指定すると、ボックスを右に寄せて配置します。

<div style="float: right; width: 100px; height: 100px; background-color: #ccccff;">ひとつめのdiv要素</div>
<div style="float: right; width: 100px; height: 100px; background-color: #ffcccc;">ふたつめのdiv要素</div>

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

clearプロパティを使用すると、floatプロパティでボックスを寄せて、他の要素が回り込んでいる状態を解除することができます。

clearプロパティの設定方法

clearプロパティには、下記のキーワードが指定できます。

clearプロパティの注意点

clearプロパティは、ブロックレベル要素に対して指定可能です。

インライン要素に対して指定しないように注意しましょう。

ボックスの配置のまとめ

今回はfloatプロパティを使用したボックスの配置についてまとめました。

floatプロパティは、サイトのレイアウトをする上で重要なプロパティなので、しっかり理解するようにしましょう。

みいと

TwitterContact

興味を持ったものをいろいろと勉強しています。