タグ別アーカイブ: float

フロートの解除

まったくもってやっかいなフロート。解除がうまくいかないとレイアウト崩れの原因になってしまいますね。そんなやっかいなフロートに立ち向かうための王道の解除方法をご紹介いたします。

ul li で、liにフロートをかけた場合

li
のフロートを解除する場合、
ul内にはliタグしか入れられないため、
王道解除のひとつである<br />で clear:both;といった手法での
解除ができません。でもフロートの解除は終了タグの直後になければいけない、でもいれられない…

そんなときは!

ulの高さがなくなってしまう対処方法

ulに
overflow: hidden;
のスタイルを設定します。
厳密にはフロートの解除ではありませんが、
レイアウトの崩れなどの不具合を解除することが可能です。

■html
<ul>
? <li>サンプル1</li>
? <li>サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2</li>
? <li>サンプル3</li>
? <li>サンプル4</li>
? <li>サンプル5</li>
</ul>

■css
ul {
??? background: #C36;
??? overflow: hidden;
}
li {
??? background: #FF3;
??? margin-top: 5px;
??? margin-bottom: 5px;
??? height: 100px;
??? float: left;
??? width: 100px;
}

フロートに悩まされているかたはお試し下さいね!

それでは~