HTML・CSS復習編 clearfixについて
はじめに
現在自分はHTML・CSSモダンコーディングという技術書を使ってHTML・CSSの復習をしております。
この記事はその復習のアウトプットです。
clearfixとは
clearfixというのは、floatプロパティを使用した場合、親要素に高さが反映されずに潰れてしまう現象を改善するための技術です。
clearfixクラスを親要素に追加してあげることで、親要素ないの最後にclearプロパティが適応してあるdiv要素が追加されます。それによりfloatの効果が打ち消されて親要素が潰れる現象を防ぎます。
実際にclearfixクラスを記述してみると....
.clearfix::after {
display: block;
clear: both;
}
<div class='main clearfix'></div>
擬似クラスafterを使うことで、このクラスを追加した要素ないの最後にdiv要素を追加します。
Author And Source
この問題について(HTML・CSS復習編 clearfixについて), 我々は、より多くの情報をここで見つけました https://qiita.com/SyutoHidano/items/020b8c24acfacbaccda6著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .