clearfixについて、今の時代にあった主流な記述ってありますか？Compass (SCSS)の場合、こんな感じですが。。。
overflow: hidden;*zoom: 1;
こんなブログ記事あったので、どうぞ
micro clearfix hackが、すっきりしてていいです。overflow:hiddenはclearしてるわけではないので、別物だと考えたほうが良いかもですね。
.cf:before, .cf:after { content:""; display:table; } .cf:after { clear:both;} .cf { zoom:1;}
トピ主です。回答ありがとうございます。micro clearfix hack…知らなかったです。こんなすっきりするんですね。勉強になります。
上のブログの中の人です。上の記事の内容は、1年ほど前のものなので、補足します。
IE6,7を対象にしたclearfixは、今まで通り*zoom:1;がベストだと思います。
IE8以上のfloat解除は、複数やり方存在します。
1.overflowoverflow:hidden; または overflow:auto;どちらでも解除可能です。
2.擬似要素を使用する場合記事の通り
.clearfix:after { content: ’’; display:block; clear:both;}
が良いかと思います。
*:after {} も記載していますが、パフォーマンスの問題や:afterを使用した場合にdisplay:blockなどを継承してしまうので、避けたほうがいいかもしれません。もし、*:afterのように、個別単位でやる場合は、SCSSで@includeよりも、@extendさせて行った方が、コンパイル後のファイルサイズは小さくなると思います。
3.tableあまりおすすめしない方法ですが、display:table;でもfloatも解除できます。ただし、display:table;を使うぐらいなら、display:table-cell;を指定した方がいいと、個人的に思っています。
IE8以上は、3点例を出しましたが、自分のなじみやすいものを、使えばいいと思います。
横からすみません。display:table;をおすすめしない理由と、display:table-cell;にしたほうが良いと考えているのはなぜでしょうか。後学のために教えていただければ嬉しいです。
display:table;をすすめない理由は、その要素に対してtable要素と同じように振舞うことに指定しているからです。overflowや擬似要素によるfloatの解除については、親要素の属性(?)を変化させないですが、display:table;を指定することによって、<table> <div class="hoge"></div> <div class="hoge"></div></table>に近い状態になるので、なんらかのバグが潜んでいる可能性も否めないからです。table-cellについては、IE6,7切捨てでいい状況の場合です。table-cellを使用することによって、table要素と同じような挙動することができます。横並びのレイアウトでfloatを使わないでも横並びなるし、並んでいる高さも一致します。vertical-alignを使って、子の要素を垂直の軸の真ん中に配置することもでき、親に隣接する要素が回り込むこともありません。floatに慣れない人にとっては、こっちの方が慣れやすいと思ったからです。ただIE6,7さえなければ。。。
なるほど、要素への影響を懸念されているのですね。その発送はありませんでした。面白そうなので、ちょっと検証してみます。table-cellについても納得です。時間割いていただいて、ありがとうございました！
トピ主です。回答ありがとうございます。！？・・・なんと、親切に長文のコメントまで頂いて・・・ありがとうございます。(^_^;) overflow:hidden;についての言及もあって、勉強になりました。
みんなの回答 4 件
こんなブログ記事あったので、どうぞ
float解除の決定版。clearfixを考えたら、進化した。 : Web Design KOJIKA17
http://kojika17.com/2011/04/floatclearfix.phpmicro clearfix hackが、すっきりしてていいです。
overflow:hiddenはclearしてるわけではないので、別物だと考えたほうが良いかもですね。
A new micro clearfix hack – Nicolas Gallagher
http://nicolasgallagher.com/micro-clearfix-hack/.cf:before,.cf:after {
content:"";
display:table;
}
.cf:after { clear:both;}
.cf { zoom:1;}
上のブログの中の人です。
上の記事の内容は、1年ほど前のものなので、補足します。
IE6,7を対象にしたclearfixは、今まで通り
*zoom:1;
がベストだと思います。
IE8以上のfloat解除は、複数やり方存在します。
1.overflow
overflow:hidden; または overflow:auto;
どちらでも解除可能です。
2.擬似要素を使用する場合
記事の通り
.clearfix:after {
content: ’’;
display:block;
clear:both;
}
が良いかと思います。
*:after {} も記載していますが、パフォーマンスの問題や:afterを使用した場合にdisplay:blockなどを継承してしまうので、避けたほうがいいかもしれません。
もし、*:afterのように、個別単位でやる場合は、SCSSで@includeよりも、@extendさせて行った方が、コンパイル後のファイルサイズは小さくなると思います。
3.table
あまりおすすめしない方法ですが、
display:table;
でもfloatも解除できます。
ただし、display:table;を使うぐらいなら、display:table-cell;を指定した方がいいと、個人的に思っています。
IE8以上は、3点例を出しましたが、自分のなじみやすいものを、使えばいいと思います。
トピ主です。回答ありがとうございます。！？・・・なんと、親切に長文のコメントまで頂いて・・・ありがとうございます。(^_^;) overflow:hidden;についての言及もあって、勉強になりました。
関連するトピックス