CSSでつまづいたこと

やっぱりfloatが分からん

なんかfloatを無効化するのにclearfixなるものがあるらしい。
[clearfixの最新版 -フロート関連やマージン相殺の不具合を解決するモダンブラウザ用clearfix]
(https://coliss.com/articles/build-websites/operation/css/css-latest-clearfix.html)

「.clearfix」というクラスを、floatプロパティを使用している親の要素に指定して以下のCSSを設定すると親要素の中に子要素がおさまる……というわけです。

.clearfix:after {
  content: '';
  display: table;
  clear: both;
}

clearfixをやる前にclearをキチンとやっておいた方がいいですね。

clear
left 要素は先行する 左の フロートと切り離され、下に移動します。 right 要素は先行する 右の フロートと切り離され、下に移動します。

うーんclearは子要素同士で使えるんだね。

clearfixの歴史を知るには以下を読み込むのがいいでしょう。
[floatを解除する手法のclearfix と 次世代のレイアウトの話]
(https://kojika17.com/2013/06/clearfix-2013.html)

そしてその進化版のdisplay: flow-root;というのもあるとのこと。

この記事↓がわかりやすかった。
[CSSのマージンが効かない時の解決法（marginの縮小・折りたたみ）]
(https://lpeg.info/html/css_margin.html)