本日の勉強内容です。
勉強内容
CSSレイアウト入門:
05〜08
進度
05:アイキャッチ画像を配置してみよう
06:2カラムレイアウトを作ってみよう
07:clearfixを使ってみよう
08:カラムに余白をつけてみよう
まで終了。
メモ
07clearfixを使ってみよう:
ここのCSSで何が起こっているのか気になったので調べてみました。
➀:after擬似要素
必須のcontentプロパティによってボックス内の末尾に新たなインラインの要素が生成される。
(因みに値に''を指定するのは、「文字が入っていない為に要素が生成されない」という問題回避のためだそうです)
➁display:block
生成されたインライン要素をブロック要素にする。
➂clear:both
float解除
と言う流れでした。
overflow:hidden
因みにその後で紹介されているこちらは「はみ出た部分を非表示にする」ですが、これで何故float解除と同じになるのかまだ理解できてないです。
でも調べだすとまた先に進めなくなるので、この後寝ながらゆっくり考えてみようと思います。
こうやっていちいち立ち止まるから捗らないんだろうなって思います…
補足
overflow:hiddenの件
解決しました。
overflowを使うと親要素がfloatのついた子要素の高さを認識するからとのこと。
何故認識するかと言うと、もし親要素がスクロールするとき、浮動化した子要素を認識していないと逆におかしな事になるからだそうです。
スッキリしました〜✨
ではお休みなさい。