素材の壺

clear: both;の指定方法〜CSS

clear: both;の指定方法〜CSS

【概要】
CSSの段組みレイアウトを作る際に必ず使う「clear: both;」指定方法について


【今回のCSS】
.clear{ clear: both; visibility: hidden; height: 0;}


【詳細】
回り込みを解除する「clear: both;」の指定方法については色々なパターンがあると思いますが、仮に


.clear{ clear: both;}


というクラスを作ったとします。これを<br />に指定すれば


<br class="clear" />


となり改行で回り込みを解除しますが、本来「clear: both;」はブロック要素でしか使う事は出来ません。しかしブロック要素(div等)に指定すると


<div class="clear">テキスト</div>
<div class="clear"><img src="1px画像など" /></div>


という記述になり、続くコンテンツとの間に出来る"隙間"に悩まされる人も多いと思います。
この問題を解決するために、以下のようにプロパティを追加します。


.clear{ clear: both; visibility: hidden; height: 0;}


こうする事で「.clear内を非表示に」「高さを0に」する事が出来ます。このクラスをdivに指定して


<div class="clear">ここでクリアー</div>


とすれば、「ここでクリアー」のテキストは表示されず回り込みだけ解除されます。


※この「HTMLには記述されているが表示されない」という現象を使ってキーワードや<h><strong>などを多数記述するのは避けましょう。スパムと認識される可能性があります。

[CSS Validator]
Valid CSS!
このCSSはW3C「CSS Validator」での検証をクリアしております。
.cl{ clear: both; visibility: hidden; height: 0;}

コメント(3)

なるほど!!
「visibility: hidden」はこういう使い方をするんですねぇ。。。
勉強になりましたm(__)m

IE6で、「visibility: hidden」が効かない時があるのですがぁ・・・ここでクリアー、という文字は消えますが、一行分空白が出来てしまう時があります。
全部が全部ではないけど、IE6のバグってやつですかね?

>>sarisaさんへ
確かに、IE6はクセモノです。。。
空白が出来てしまう時は

overflow : hidden;

を追加する事で回避出来ます。
ただ、全部この内容にしてしまうと他の部分が崩れてしまう可能性があるので、

.clear{ clear: both; visibility: hidden; height: 0;}
.clear2{ clear: both; visibility: hidden; height: 0; overflow : hidden;}

みたいに2種類作って、IEが崩れているところのみ適用。もしくは

*html.clear{ clear: both; visibility: hidden; height: 0; overflow : hidden;}

のように、スターハックで書けばWin IE4〜6、mac IE4〜5にだけ適用されるはずです。
(CSSの書式上、正しくは無いですが。。。)

コメントする

名前
電子メール
URL
コメント
サイト内検索
TOP利用規約リンクについてお問い合わせ│相互リンク[ 素材1 ][ 素材2 ][ 素材3 ][ HP制作 ]│
無料アフィリエイトツール「アフィーノ」