読者です 読者をやめる 読者になる 読者になる

ねっとぱんだ

Webデザイン、プログラミングの勉強ブログ。

【HTML5,CSS3】floatと回り込み


たまに分からなくなってしまうfloatについて、ここでしっかり把握しておこうと思い改めて検証しました。

float
通常の流し込みから外れて、要素を左右どちらかに移動させ、他の要素を回り込ませる処理。
他のfloatした要素の辺に触れると左右への移動が止まる。
float : left ;
左へ移動
float : left ;
右へ移動
float : inline-start ;
親要素の始端へ移動。
float : inline-end ;
親要素の終端へ移動。

参考:
float - CSS | MDN

幅高さを決めたdiv同士の場合

以下のように親要素の横幅が決められた中での動きを検証します。


f:id:p_and_a_fam:20170408012434p:plain:w200

aにfloat : left ;

bはaの下に潜り込みます。
bのテキスト部分は潜り込まず、cに重なっているようです。


f:id:p_and_a_fam:20170408013551p:plain:w200

aにfloat : right ;

aが右に浮き上がり、その隙間にbが回り込みます。


f:id:p_and_a_fam:20170408013418p:plain:w200

bにfloat: left ;


f:id:p_and_a_fam:20170408081218p:plain:w200

bにfloat: right ;


f:id:p_and_a_fam:20170408081334p:plain:w200

aとbにfloat : left ;

bがaに続いて左に浮き上がっていくためaとbは並びます。
cはaがいた場所に潜り込みます。テキスト部分は置き去りになっています。


f:id:p_and_a_fam:20170408020513p:plain:w200

aとbにfloat : right ;


f:id:p_and_a_fam:20170408081628p:plain:w200

cにfloat : left ;

直下の要素であるdがcのスペースが空いた分、回り込みます。


f:id:p_and_a_fam:20170408015059p:plain:w200

cにfloat : right ;


f:id:p_and_a_fam:20170408081811p:plain:w200

abc にfloat: left ;

abcはfloatした後、左を目指しながら同じレイヤーに居るかのような動きを見せます。
dは上の要素が3つ文空いたので、左上につまりaがいた位置に動きます。(テキストは元の位置にいます。)


f:id:p_and_a_fam:20170408020021p:plain:w200

abc にfloat: right ;


f:id:p_and_a_fam:20170408082646p:plain:w200

abcd にfloat: left ;


f:id:p_and_a_fam:20170408082822p:plain

abcd にfloat: right ;


f:id:p_and_a_fam:20170408082809p:plain

まとめ

  • floatをかけていない通常の要素は「左上」に詰まっていく。
  • floatした要素の直下の要素にのみ、回り込みが起きる。直前の要素には干渉しない。
  • floatしたオブジェクトはそれぞれ「floatで指定した向きと上」に詰まっていく。
  • floatしたオブジェクト同士は回り込まず同じレイヤーに居るかのような動きを見せる。なのでマージンはお互いに影響する。