floatの解除 - HTML
すべての子要素にfloatが設定されていると、親要素の高さは0pxになってしまう。そのため、子要素の高さに合わせて親要素も設定してくれるようにfloatを解除しないといけない
See the Pen 子要素がすべてfloatしていると親要素の高さは0px by tamago (@tamago324) on CodePen.
floatについては以下のサイトが参考になった
CSSのfloatに困った時に見直したい6つのポイント、floatがどのように機能しているか分かりやすく解説 | コリス
floatの解除方法
- float解除用divの追加
- 【これ良い！！】親要素に
display: flow-root;を適用
float解除用divの追加
clearプロパティを使うことでfloatを解除することができる
例）右側のfloatの解除
.clear { clear: left; }
See the Pen floatの解除(clear: left;) by tamago (@tamago324) on CodePen.
親要素にdisplay: flow-root;を適用
親要素にdisplay: flow-root;というスタイルを適用するだけでいい！！
これ単純だし、いいかも！！
.container { display: flow-root; }
clearfixの必要がなくなる新しいプロパティをW3Cが定義、一部のブラウザでもう使える！ | コリス
See the Pen floatの解除(display: flow-root;) by tamago (@tamago324) on CodePen.
すごい！！！！！これいいね！！！！
