float を使用したあとのスマートなclear:both | Nyan-Chew's Digital Life
本文中に画像の入ったブロックなどを入れるときに、float:right などとして右に寄せたとする。このとき、画像ブロックの縦の長さが外側の本文ブロックの長さより長いと下側にはみ出てしまう。これを防ぐために、clear:both でfloatをクリアする。 clear:both のスマートな使い方がわかったので書いておく。 参考にしたページは以下である。 Simple Clearing of Floats 私が使っていた方法 従来から言われているように、以下のclassを定義してクリアする必要がある場所にダミーのブロックを挿入していた。ダミーのブロックは、 <div class="c-both"></div> のような具合だ。 .c-both { clear:both; display:block; visibility:hidden; } こんな風に使っていた。 <div class=
[CSS]floatによるブラウザ間のズレの問題(2) - WEBの落書帳
floatを使ったコーディングで気をつけることその２です。 「floatを使ったコーディングは難しい」と最初は思うかもしれませんが、きちんとしたルールに則って使ってあげれば 決して難しいことではないのです。 フルCSSレイアウトをマスターする上でも重要になりますので必ずマスターしてくださいね。 さて、前回はIE6のバグでしたが今回はfloatの解除に関する問題です。 基本的にfloatを使ったら必ずclearで解除すると覚えて下さい。 このエントリでは、<img>要素にfloatを付けて文字を回り込ませるという使い方ではなく、 <div>等のブロックレベル要素をfloatしてレイアウトを組む時の方法になります。 ブロックレベルとインラインレベル まず、「ブロックレベル」と「インラインレベル」ってご存知でしょうか。 htmlタグと呼ばれる要素は２種類に分別することができます。それが上の２つで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
