CSSのfloatプロパティって本当に浮いてるの!?
デイトラ5日目でheaderをコーディングしました。headerのタイトルやリンクを横並びにするには、flexやfloatを使います。今回はfloatを使いました。
しかし、このfloatが少し厄介なんです...なぜならば、floatは文字通り要素が本当に浮いてるので、親要素の高さが0になってしまうんです。
そこで、clear::afterという擬似要素を用います。これを親要素に指定すれば、親要素のタグ内の最後にfloatを解除する見えない要素を追加できます。だからafterなんですね。
CSSの記述はこんな感じ。
.clear::after {
content:"";
clear: both;
display: block;
}
htmlファイルで使いたい親要素のクラス名にclearを使えば、CSSを適用できます
親要素内に子要素が全くないを防げるので、これで一件落着です。
この記事が気に入ったらサポートをしてみませんか?