HTML講習

ボックスモデルの視覚整形2（PDF 素材）

フロート（float、clear）

要素のボックスを移動（浮動化）させること。

float: left;（左にフロートしたブロックボックスを生成）

float: right;（右にフロートされてブロックボックスを生成）

float: none;（指定の要素のボックスをフロートしない）

何らかのかたちで幅を指定しなければならない決まりがある。




widthプロパティで幅を指定する。

フロートは、後に続く他のブロック要素のボックスについても有効で、回り込みは解除されない。

clear: none;（フロートは有効。回り込み解除されない。）

clear: left;（左回り込み解除。）

clear: right;（ 右回り込み解除。）

clear: both;（ 左右両側の回り込み解除。）

重なり順序（z-index）

ボックスの重なり順序を指定するプロパティ。

positionプロパティで、relative・absolute・fixedのいずれかの値を持つ要素にしか適用されない。

z-index: auto;（親要素と同じ。）

z-index: 整数;（基準を0とし、値の大きいボックスが値の小さいボックスより常に全面に表示される。マイナス値も指定可能。同じ値のボックスは、後に書かれた要素が全面へ表示される。）

フロートの配置ルール

フロートは特殊な配置方法なので、10の厳格な配置ルールが定められている。

• 左にフロートされたボックスの左マージンが、包含ブロックの左側より左にあってはならない。右も同じ。
• 左(または右)にフロートしたボックスの後に、さらに左 (または右) にフロートさせたボックスがある場合、後のボックスは前のボックスの右か下に配置されなければならない。（ブラウザにより機能しない）
• 左にフロートされたボックスの右マージンが、右にフロートしたボックスの左マージンより右にあってはならない。右も同じ。
• フロートしたボックスの上マージンは、包含ブロックより上にあってはならない。
• フロートしたボックスの上マージンは、それ以前に別の要素が生成したブロックボックスより上にあってはならない
• 左にフロートしたボックスの後に、さらに左にフロートしたボックスがある場合、後のボックスの右マージンが包含ブロックの右辺より右にあってはならない。右も同じ。
• フロートしたボックスは、出来る限り上の方に配置されなければならない。
• 左フロートは左に、右フロートは右に配置されなければならない。先にフロートした方が優先的に上へ配置される。
• フロートしたボックスにclearを設定する場合、
  clear: left　それ以前の全ての左にフロートしたボックスの上マージンより下に配置
• clear: right　それ以前の全ての右にフロートしたボックスの上マージンより下に配置
• clear: both　それ以前の全ての左右にフロートしたボックスの下マージンより下に配置

display、position、floatの競合

• displayの値が、「none」の場合、positionとfloatを無視しなければならない。
• positionの値が、「absolute」「fixed」の場合、displayは「block」floatは「none」に設定される。
• floatが「none」以外の場合、displayは「block」と設定され、フロートする。
• 上記以外でdisplayに値が設定された場合、そのように適用される。