1年 ago
1668 Views

最近のclearfixについて

css

お久しぶりです。毎日記事を投稿するはずが、忙しすぎて更新出来ずにいました。。。すいません。
色々と新しいティップスがストックされているので、少しずつ載せていきたいです。。。
どこかで誰かのお役に立てればっと思います♪

今回は簡単にclearfixについてでもお話します。
どんどん新しくなるブラウザ仕様に追い付くのは大変ですね。。。歳はとりたくないものだ…
floatで要素を横並びにした際、横並びに使用したタグが閉じられても浮いたままの状態が残ってしまい、次に配置する要素までずれ込んでしまいます。
つみきで言うところの、要素を積み重ねていく中で、floatした要素は浮いていて、積み重ねれず、(浮いてるため高さが分からない)。
そこで、clearfixを使用し、『浮いた状態が必要なくなったところで解除』してから次の要素を配置するために行うのが「clearfix」です。

最近のブラウザに対応したclearfixとoverflowによる高さの計算方法をご紹介。

clearfix

以前のcearfix


.clearfix:after{
content: ".";
display: block;
height: 0;
font-size:0;
clear: both;
visibility:hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE Mac */
* html .clearfix {height: 1%;}
.clearfix {display:block;}
/* End Hack */

最近のブラウザに対応したcearfix

zoom:1;はIE6,7に対応用です。

.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;

親要素にoverflow:hidden; または overflow:auto;を使う

ボックスの高さは中身で決まります。cssのルールではoverflow:visibleだとfloatしたもの(浮動化ボックス)は中身だとは認識されません。
しかし、overflow:visible以外では浮動化ボックスも中身として計算されます。(高さが認識されるのです。)
とにかく、親要素のoverflowをhiddenかautoにすると高さが認識されるということです。
※overflow:hidden;を高さを認識させるおまじないのように使っていくと、中身がはみ出してしまった時、表示されなくなるので、レイアウトが崩れてしまうということです。
IE6,7を対応させたい場合はzoom:1;を入れてください。

Article Tags:
· ·
Article Categories:
html&CSS
12345 (No Ratings Yet)
Loading...

Leave a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Menu Title
ツールバーへスキップ