おやじ

おやじ

2016年01月17日

floatプロパティの説明

floatプロパティは、指定されたボックス(div)要素などを左または右に寄せて配置する際に使用します。 後に続く内容は、その反対側に回り込みます。

float : left;
指定した要素を左に寄せます。後に続く内容はその右側に回り込みます。
float : right;
指定した要素を右に寄せます。後に続く内容はその左側に回り込みます。

例えば図-1のように配置されたdiv要素をスタイルシートで「float : left;」を指定することにより図-2のように配置されます。

float_02float_01

HTMLの記述

スタイルシートの記述

スタイルシートの10行目「clear : both;」は「float : left;」で左寄せされた要素に対する回り込みを解除します。

floatプロパティを指定した要素の直後の要素で必ずclearプロパティを指定する必要があります。

clear : left;
左寄せされた要素に対する回り込みを解除します。

clear : right;
右寄せされた要素に対する回り込みを解除します。

clear : both;
左寄せ、または右寄せされた全ての要素に対する回り込みを解除します。

 

コメントを残す