この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。
こんにちは。
最近Rubyをあんまり触ってないmaiです。
あんまり触ってなくて、Rubyについてあまり語れるほどのことが無いので、
今日はstylesheetのちょっと役立つTipsをご紹介。
cssでfloatを使うと、画像やらボックスやらが親要素からはみ出しちゃうことがあります。
これを解消するには、親要素を閉じる前にfloatをclearで解除すればいいのですが、
空divでclearさせるのは無駄なソースだし美しくない。
そんな美学か美意識を持ってる人にお役立ちなのがclearfixというテクニックです。
———————————–
以下のclearfixはFirefox3でうまくいかないことがあります。
Firefox3にも対応したバージョンは
「clearfix for Firefox3」で。
———————————–
御託を並べても仕方が無いので、さっくりとcssをご紹介。
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
このclearfixを、親要素に適用します。
<div id=”main” class=”clearfix”>
<p style=”float:left”>左の要素</p>
<p style=”float:right”>右の要素</p>
</div>
こんなカンジ。
これでid mainのdivは二つのpを内包しているように振るまいます。
空divをかかなくてよくなるので、ソース上ちょっとスッキリするのもいいところ。
もともと、floatは通常の流れから切り離された浮動体なので、
親要素がfloatしている要素の高さを考慮しなくなるのは仕様上正しいことなんですが、
レイアウトを組む身としては、clearfixがなくても、
floatしている要素の高さも認識してほしいなぁと思わないでもないです。
ちなみに、clearfixについては以下のサイトも参考になります。
connpass
Peatix
Wantedly
デザインチームnote