[HTML+CSS] <br class=”clear” />を利用したfloat解除(ボックスの浮きを解除)

CSS3のflex

下記の通りflexを使って対応するのがスマート。

.sample{
display:flex;
flex-wrap:wrap;
}

大事なのは折り返すように指定しているところ。

clearfixを使った方法

<br class=”clear”>だとちょっと…という時は、clearfixを使って対応していた。floatの親要素にclearfixというクラス名(任意)を付与して、cssをうまくclearできるようにしたもの。検索すればどこかのソースコードが引っかかってくるのでそちらを参照。

古い方法

趣味でWeb制作を行う際にはこのような記述をする必要が無いが、CSSに不慣れな人とチームを組む時や作業効率化を図りたい時にはこういった手段が必要だと思います。

<br class=”clear” />を利用する時にたまに出ちゃう空白を消したい。というときには以下のような記述を。

br.clear{
display:block;
margin:0;
padding:0;
clear:both;
height:0;
border:none;
visibility:hidden;
font-size:0;
}

heightとかmarginとかいろいろつけてとにかくつっかえ棒のように入れる目的ならそれだけでは足りない。
文字のサイズが親要素を継承した大きさとなっているので、0にする。そうすればただのつっかえ棒になる。<br>のみに指定し、他のボックスには指定してはいけないです。フォントが0になってしまうので。