ホームページ制作に使える情報

clearfixを使う

floatした要素が親要素の高さを超えてはみ出してします時があります。

例えば、親要素にborderの指定をしている時にborderからはみ出しているので、レイアウトが崩れて残念なWebサイトになってしまいます。

そんな時に使うのが、clearfixですね。clearfixは下記のようにclassを使って書く方が多いです。

.clearfix:after{

visibility: hidden;

display: block;

content: “.”;

height: 0;

clear: both;

}

clearfix {display: inline-block;}

/* Hides from IE-mac \*/

* html .clearfix {height: 1%;}

.clearfix {display: block;}

/* End hide from IE-mac */