2009年6月アーカイブ

floatを使用してボックスやリストを横並びにした時、次のコンテンツも続いて横並びになってしまうので、回り込みを解除しなければなりません。

また、floatした親要素の内容が0になってしまい、親要素に背景やborderを適用しようとしても表示できません。

これを簡単に解決する方法がいくつかあります。

  1. 次のコンテンツに「clear」を指定する
  2. 親要素に「clearfix」を使用する
  3. 親要素に「overflow」を指定する

まず、サンプルとして共通の(X)HTMLコードを示します。

(X)HTMLコード

<div id="menu">
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
<li>メニュー5</li>
</div>
<div id="contents">
・・・
</div>
</ul>

1.次のコンテンツに「clear」を指定する

回り込みを解除したい要素に「clear:both;」を指定します。

CSSコード

div#contents {
   clear:both;
}

2.親要素にclearfixを使用する

floatの親要素の高さを算出するメジャーな方法に「clearfix」と呼ばれるテクニックがあります。これを考えた人はすごいです。

CSSコード

div#menu {
   margin:0;
   padding:0;
}

div#menu li {
   float:left;
   list-style:none;
}

/* モダンブラウザ(Firefox Opera Safari)対策 */
div#menu :after{
   content:".";
   display:block;
   height:0;
   clear:both;
   visibility:hidden;
   font-size:0;
}

/* Win版IE7とMac版IE5対策 */
div#menu {
   display:inline-block;
}

/* Win版IE5および6対策 */
/* Hides from IE-mac \*/
* html div#menu {
   height:1px;
}

div#menu {
   display:block;
}
/* End hide from IE-mac */

3.親要素にoverflowを指定する

overflowを親要素に指定することにより、高さが算出されます。値はauto、hidden、scrollのいずれかを使用します。

CSSコード

div#menu {
overflow:hidden;
}

確認はしていないのですが、「overflow:hidden;」を使用した場合、ブラウザのバージョン(特に古いバージョン)によっては正常に動作しなかったり、印刷時に問題があったりすることもあるようです。

参考サイト

そのほかにもいろいろとfloatを解除する方法があるようです。

例えば、フッターメニューやblogのページャー(ページネーション/ページ切り替えメニュー)をリストで作成し、floatで横並びした際、メニュー全体をセンタリングさせようと思っても、「margin:0 auto;」や「text-align:center;」など一般的にセンタリングさせる方法が効きません。

その場合、「position:relative」で位置をコントロールするとうまくいきます。

(X)HTMLコード

<div id="menu">
   <ul>
   <li>メニュー1</li>
   <li>メニュー2</li>
   <li>メニュー3</li>
   <li>メニュー4</li>
   <li>メニュー5</li>
   </ul>
</div>

CSSコード

div#menu {
   position:relative;
   overflow:hidden;
}

div#menu ul {
   position:relative;
   left:50%;
   float:left;
}

div#menu li {
   position:relative;
   left:-50%;
   float:left;
}

参考サイト