Web Design Leaves

フロートについてのメモ。

自分がよく忘れがちなのが、width の指定。
フロートさせる要素自体についてもだが、その親要素にも適切な幅を指定（確保）しないとフロートされないなどはまってしまうことがある。

float プロパティは、指定したボックスをフロートさせて、通常フローから外し、左または右に寄せることができる。

• float プロパティを指定するボックスは幅を明示しておく必要がある
• 固有の寸法を持ち、特定の内容に置き換えられる要素（置換要素）以外の適用には、同時に width プロパティで幅を指定する
• 幅が指定されていない場合、ボックスの幅は「0」として扱われる

フロートと周囲のボックスの関係

div#container 内に４つの div 要素 A, B, C, D を記述し、各要素に 10px のマージンを指定した場合。

float を指定しない状態

• 各ブロックボックスは通常フローの中にあるので、垂直方向に上から下へと配置される
• ボックス間のマージンは相殺され、それぞれのボックスの余白は 10px になる

ボックス B にwidth と float を次のように指定する。

div#box-B {  
  float: left;
  width: 40%;
  background-color:#CFC;
}

• ボックスB はその左マージン辺を、包含ブロックである div#container の左辺まで横に移動
• 後続するボックス C、D は、フロートしたボックスB が存在しないかのように通常フローによって配置され、フロートするボックス B の裏へ重なる
• このとき、フロートするボックスの横に位置する行ボックスは、フロートする領域を確保するために幅が調整される
• また、フロートするボックスのマージンは相殺されないので、ボックス A と B の間のマージンはお互いのマージンの合計である 20px の余白が空く。

フロートの解除

float プロパティによって許可された流し込み（回り込み）を解除するには clear プロパティを使用する。
ボックス D に clear プロパティを指定する。

div#box-D {
  clear: both;
  background-color:#FCF;
}

clear プロパティで流し込みの解除を指定したボックスは、上方マージン、それでも足りない場合はクリアランスと呼ばれる特殊な隙間（C と D の間の空間）を広げ、フロートしたボックスの下方に位置するように調整される。

重なったブロックにマージンを指定し、列を分割したレイアウトを作成

• フロートしたボックスに後続する通常の（フロートしない）ブロックボックスは、フロートしたボックスの背面に隠れるように重なる。
• この重なったブロックボックスにマージンを指定し、フロートしたボックスと重ならないように余白を取ることで、列を分割したレイアウトを作ることができる。

複数フロートの横並び

• ボックスがフロートするとき、先行するフロートしたボックスが存在する場合、それぞれのマージン辺が重ならないように横に並んで配置される
• フロートするボックスの左右のマージン辺は包含ブロックの左右の内容辺を超えてあふれることは禁止されている
• 超える場合は、先行するフロートしたボックスの下に配置され、float プロパティの指定により左右いずれかに寄せられる
• フロートするボックスの左右のマージン辺が包含ブロックの左右の内容辺を超えた場合は下に移動する
• これを防ぐためには、親ボックスに width を指定して固定させ、フロートするボックスが十分に並べる幅を確保する