フローティング関連の主なプロパティ。

CSS(カスケーディングスタイルシート)での枠線関連のプロパティ(属性)について、主なものについて解説します。

フローティングとは何か。

フローティングとは、ある要素を左または右に寄せ、後続するテキスト類をその反対側に廻り込ませる事です。

通常、ブロックレヴェル要素は上から下に一次元的に配置して行きます。

ここで、ある要素をフローティングさせると、その要素は左か右に寄せられ、後続の要素はその反対側に廻り込むように並べられます。

この結果、通常の上から下への一次元的なレイアウトを右や左へ一時的に変える事が出来るようになり、結果二次元的なレイアウトが実現すると言う訳です。

フローティングには、以下のルールが仕様で定められております。

以下、現行規格であるCSS第二水準第一改訂版(CSS 2.1)及びCSS第三水準(CSS3)・平成19年 8月 9日現在の草案に従って解説します。現在のルールは、それ以前のルール(CSS第一水準(CSS2)及びCSS第二水準(CSS2))とは異なったものとなっております。

要素を左か右に寄せると言う事は、当然その要素には横幅が定まっていないといけません。

画像など横幅が定まっている、いわゆる置換インライン要素であれば、その横幅に従えば良いので問題はありません。

しかし、一般のHTMLでの要素には横幅が定まっていないものが多く、このため、以下のような方法で横幅を決める事となっております。

フローティングは一個の要素だけが出来ると言う訳ではありません。

ある要素をフローティングして更にまた別の要素をフローティングすると言う事もあり得ます。

このようにフローティングが複数行われた場合、以下のようなルールに従う事となっております。

この他にも細かいルールがありますが、簡単な原則としては、

と言う事を覚えておけば良いでしょう。

フローティングされる要素については、インライン要素であってもブロックレヴェル要素と見なします。

すなわち、上下にもマージンが生じる事となります。

また、インライン要素でのみ有効なプロパティは無効となり、逆にブロックレヴェル要素でのみ有効なプロパティが効力を発する事となります。

float プロパティは、フローティングの指定です。

float プロパティの主なプロパティ値としては、以下のものが取れます。

float プロパティを指定しない場合、上位からは値が継承されず、デフォルトである none (フローティングなし)が値として採られます。

clear プロパティは、フローティングされた影響で行われるテキスト類の廻り込みを解除する指定です。

廻り込みを解除された場合、フロートされた要素の真下に配置されるようになります。

clear プロパティは、ブロックレヴェル要素でのみこの指定が可能です。インライン要素に指定した場合は無効となります。

clear プロパティの主なプロパティ値としては、以下のものが取れます。

float プロパティを指定しない場合、上位からは値が継承されず、デフォルトである none (フローティングの廻り込み解除無し)が値として採られます。