WEB制作に関するちょこっとしたことをメモするブログ
2009.07.24
floatでブロック要素を並べると、普通は右（float:right）か左（float:left）かどちらかにしか揃えることが出来ません。真ん中に揃えるには、position:relativeでうまく位置調整してあげます。
■HTML
<div class="menu"> <ul> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> <li>メニュー4</li> <li>メニュー5</li> </ul> </div>
■CSS
div.menu {
position:ｒelative;
overflow:hidden;
}
div.menu ul {
position:relative;
left:50%;
float:left;
}
div.menu li {
position:relative;
left:-50%;
float:left;
}
2008.11.10
段組などでブロック要素をfloatさせたとき、それを囲む親要素の高さが算出されないという問題があります。floatは「回り込み」ではなく、あくまでも「浮かせた」だけなので、浮いた要素は親要素からすると無くなったものと解釈される、と考えると分かりやすいです。
そこで定番の解決策として、親要素にclearfixを適用します。
このブログでもclearfixを使っています。
■HTML
<div class="clearfix"> <div style="float:left;width:200px;">左カラム</div> <div style="padding-left:200px;">右カラム</div> </div>
■CSS
.clearfix {
zoom:100%;
}
.clearfix:after {
content:" ";
clear:both;
height:0;
display:block;
visibility:hidden;
}
clearfixのもうひとつの利点は、floatさせた後にいちいち<br clear=”both” />とかでクリアする必要がないことです。不要なbrは避けるべきなので、その点でもスマート。
clearfixは亜種がたくさんあり、互換性等が考慮されて日々進化しています。
都度新しいclearfix（という名前とは限らないですが）をチェックしておきましょう。