プログラミング覚え書き

WEB製作覚え書き

ノート代わりに勉強した内容をまとめています。

CSS:レイアウト(float)

 

要素を浮かせて配置する

要素名{

  float:値;

}

f:id:midori_x:20191219112256p:plain

 

 要素の回り込み

f:id:midori_x:20191220102004p:plain

 

floatのルール

  • 要素が浮く
  • 後に続くコンテンツが逆側に回り込む
  • 上下マージンが加算(その結果、回り込んだ要素の上辺が揃わない事象が発生する。→floatさせた要素の上マージンで調整)
  • 幅が要素内のコンテンツに合わせて可変

 

回り込みの解除

要素名{

  clear:both;

}

f:id:midori_x:20191220102158p:plain

 ※both以外はあまり使わない

f:id:midori_x:20191220105238p:plain

 

表示方法の定義

要素名{

disprly:値;

}

f:id:midori_x:20191220105852p:plain