こんにちは。メリークリスマス！！です。
制作部の山口です。
先日、floatについて話題になったので、それを記事にしたいと思います。
まず、float解除には主に以下の3つの方法があります。
1.clear プロパティを利用する
CSSで回りこみ解除用のセレクタを作成し、clear:both;というプロパティをあてます。
後は、解除したいボックスの最後にこのセレクタを配置することで、回りこみが解除されます。
<div>
<div class=”floatL”>floatしている要素</div>
<div class=”floatR”>floatしている要素</div>
<div class=”cb”>float解除</div>
</div>
.cb{
/* floatを解除 */
clear: both;
}
『デメリット』
・子要素がすべてfloat指定している場合には使えません。
・float指定した要素にclear: both; を指定すると回り込みが行われません。
2.overflow プロパティを利用する
親要素にoverflow:hidden;の記述を加えることで、回りこみを解除します。
<div class=”ovfh”>
<div class=”floatL”>floatしている要素</div>
<div class=”floatR”>floatしている要素</div>
</div>
.ovfh{
overflow:hidden;
}
『デメリット』
・元々は切り抜くためのプロパティなので、はみ出した部分は切り取られ、非表示になってしまいます。
3.親要素にclearfixを指定して解除
clearfixは親要素で指定します。clearfixは親要素内の最後の子要素をCSSで擬似的に作り出し、それにclear: both;を指定してfloatを解除しています。
clearfixにはいろんな種類があり、参考サイトでは micro clearfx を使用していました。
.cf:before,.cf:after {
content:””;
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 */
.cf {
zoom:1;
}
後は、このclacc=”cf”セレクタを親要素に設定するとfloatが解除されます！
『大きなデメリットはありません！』
私は、HTML/CSSを最初に習った時3番を使用していました。しかし、clearfixのこの文章を見ると、一つ一つのCSSプロパティの役割や、どこにその役割をあてているのか、しっかり理解することができずにいました。
入社してからは、2番を教えてもらいました。
親要素にoverflow:hidden; をあてるだけなので、とってもシンプルに思えて、今では2番を主に使用しています。
改めてfloat解除の方法をそれぞれ見てみると、デメリットやソースの書きやすさはそれぞれに異なり、それぞれの役割も以前より理解できました。ですので、適材適所でしっかり使い分けていけたらなと思っています。
参考サイト
1：http://uxmilk.jp/14792
2：http://web-manabu.com/html-css39/
さて、今年も残すところ1週間を切りました。というか6日！
私は、静岡へ帰省する予定です。静岡といえば、必ず食べるのは『さわやか』のハンバーグです。
さわやかは静岡にしかないハンバーグチェーンレストランです。
牛肉100%・炭焼きハンバーグで、おすすめの食べ方は、「オニオンソースで少し赤身の残る程度の焼き加減」でオーダーです。
以前はげんこつハンバーグ（250g）でいけましたが、最近はおにぎりハンバーグ（200g）のヘタレ具合ですが、帰省の時は必ず食べに行きます！あー早くたべたいです！
