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を適用できます
　親要素内に子要素が全くないを防げるので、これで一件落着です。