【概要】
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>などを多数記述するのは避けましょう。スパムと認識される可能性があります。

