フロートの配置ルール

フロートを使った場合の配置ルール
 (1)左にフロートされたボックスの左外辺(マージンがある場合はマージンの左辺)が
   包含ブロックの左辺より左側にあってはならない
     同じ事が右にフロートされたボックスにも当てはまる
     つまり包含ブロックからははみ出ないということ

 (2)左にフロートされたボックスの後ろに、別の左にフロートさせたボックスがある場合
   後ろのボックスは前のボックスの右側に配置されるか、下に配置されなければならない
     同じ事が右にフロートされたボックスにも当てはまる
     右に空いてるスペースにより、収まりきれれば右側に、収まりきれなければカラム落ちになるということ

 (3)左にフロートされたボックスの右外辺(マージンがある場合はマージンの右辺)が
   右側にフロートされたボックスの左外辺より右にあってはならない
     同じ事が右にフロートされたボックスにも当てはまる
     フロートしたボックス同士は重ならないということ

 (4)フロートされたボックスの上外辺は
   包含ブロックの上辺より上にあってはならない
     包含ブロックからははみ出せないということ

 (5)フロートされたボックスの上外辺(マージンがある場合はマージンの上辺)は
   それ以前の要素が生成したブロックボックス、またはフロートボックスの上外辺より上にあってはならない
     2番目にフロートしたボックスが、先にフロートしたボックスの上辺より上にくることはないということ

 (6)フロートされたボックスの上外辺(マージンがある場合はマージンの上辺)は
   それ以前の要素が生成したボックス内の行ボックスの上辺より上にあってはならない
     2カラムレイアウトで考えれば分かりやすい

 (7)左にフロートされたボックスの後に、別に左にフロートされたボックスがある場合
   後ろのボックスの右外辺が包含ブロックの右辺より右にあってはならない
     同じ事が右にフロートされたボックスにも当てはまる
     包含ブロックからははみ出すことはできない、幅が入りきらなければ下にレイアウトされるということ

 (8)フロートされたボックスは出来る限り上に配置されなければならない
     余分な空白はできずに、可能な限り上に配置されるということ

 (9)左にフロートされたボックスは、出来る限り左側に配置されなければならない
   右にフロートされたボックスは、出来る限り右側に配置されなければならない
     後に続くフロートされたボックスよりも、優先的に上方に配置される
       カラム落ちするのであれば、後から配置された方が下に、先に配置された方が上に配置されるということ

 (10)フロートされたボックスに clear プロパティーが適用される場合
   そのボックスの上辺は
      「clear:left」の場合はそれ以前の全ての左にフロートされたボックスの、
      「clear:right」の場合はそれ以前の全ての右にフロートされたボックスの
      「clear:both」の場合は左右両方にフロートされたボックスの

     下外辺よりも下に配置されなければならない
     クリア したボックスは、フロートしたボックスよりも下に配置されるということ


投稿日

カテゴリー:

,

投稿者:

タグ:

コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください