float復習、clearfixはいらない
カテゴリ：備忘録(WEB)
苦手な人が結構多いcssのfloatのおさらい。
上のようなデザイン(左右(body)は白)のソースコードを見ると、よくみかけるのは
clearfixやoverflowで、なんとかしたものです。
ソースコードを見て
<div class=”c-both”></div>とか<div class=”c-fix”></div>
などclearfixに関連した名前、もしくはそのままで「cleat: both;」だけの為の空のdivタグが設定されていたら、それです。
div要素は本来、他の要素をグループ化するためのものです。
ただ、floatの性質を知らないと上のようなデザインの時に、設定がうまくできず、背景が下までいかず切れるので、clearfixを使ってしまうんでしょうね・・・
floatさせると回り込む・・・のではなく、上に浮いているイメージになります。
コンテンツを全部浮かせるとwrapperと同じ階層にコンテンツがなくなった時点で高さ(height)を失って背景が消えます。
それをclearfixで出していく・・・
そんなことしなくても、もう大丈夫です（＾-＾）b
まず、html側divでのグループ化ですが
外側をwrapper(outer)(赤線：floatさせないので高さを失う)とinner(緑線)で2重にします。
wrapperにはmargin:auto;で中央寄せの設定。
innerにはfloatと背景の設定。これで、中身と同じようにfloatさせるので同じレベルになり、背景が切れません。
以下、sampleコードです。
html
-
<div id="wrapper">
-
<div id="inner">
-
<header>ここにヘッダーコンテンツ</header>
-
<div id="contents">
-
<div id="right-column">ここに右カラムコンテンツ</div>
-
<div id="left-column">ここに左カラムコンテンツ</div>
-
</div>
-
<footer>ここにフッターコンテンツ</footer>
-
</div>
-
</div>
CSS
-
/* 真ん中にする為の設定 */
-
#wrapper { -
width: 980px;
-
margin: 0 auto;
-
}
-
/* 背景の設定 */
-
#inner { -
width: 950px;
-
float: left;
-
margin-left: 15px;
-
background: #FFF url(背景画像のurl) repeat-x;
-
}
-
/* 以下省略 */
まとめ)
floatさせた要素はwidth指定を入れる。崩れにくくなります。※最初(できればワイヤーフレーム)の段階にキッチリと数値を決めておく。
floatさせた要素は1つ浮いたレベルになっていると想像する。
背景つきの親要素はfloatさせて内包した要素とレベルをあわせる。(背景切れの防止)
空のdivはグループ化以外では極力使わないというか、正しくコーディングしようとする自然と使わなくなっていきます。
オマケ）border、paddingを指定したらその分widthから引くのを忘れないようにしましょう。
コメントを残す