HTML,CSS勉強メモ #5 〜float解除まとめ〜

本日の勉強。

勉強内容

CSSレイアウト入門

13～15

実践！ウェブサイトを作ろう

01～04

進度

CSSレイアウト入門終了

13:positionプロパティで使ってみよう

14:画像付きリストを作ってみよう

15:画像付きリストを完成させよう

実践！ウェブサイトを作ろう

01:実践的なレイアウト手法を学ぼう

02:1カラムのレイアウト

03:2カラムのレイアウト(可変幅)

04:2カラムのレイアウト(固定幅)

メモ

float解除の方法

今日勉強した「実践！～」の範囲は復習のような感じでしたが、
レイアウト入門の時からfloat解除の方法が色々出てきてこんがらがっていたので、
まとめておこうと思います。

➀ clear:both;

• 解除したい要素のスタイルに clear:both; を指定する。
  • floatの親要素の高さが消える。
• floatの親要素内に <div style="clear:both;> を作る。
  • ソースが増える。

➁ clearfix

• 親要素に:after擬似要素を使ってclearにするソースを記入する。
  • 古いブラウザには対応していないものもある。
  • :after擬似要素には必ずcontentを指定すること。

〇〇:after {
     content: '';
     display: block;
     clear: both;
}

③ overflow:hidden;

• 親要素に overflow:hidden; を付ける。
  • 子要素に position:absolute; などが使えなくなる。

それぞれにメリット、デメリットがある様です。ケースバイケースで使い分けた方が良さそうですね。

因みに私は:after擬似要素についてキチンと理解していなかった様で、clearfixについては必ずclassなどで.clearfix`のように指定しないといけないのかと思っていたのですが、そのまま親要素にくっつければ良かったみたいですね。

『実践！〜』の2カラムのところではoverflow:hiddenのみ紹介されていましたが、全部試してみて認識を深める事ができました。