【css】floatで回り込みを解除する方法 「clear」と「clearfix」

css

要素を横並びにする際よく使われるのが「float」ですが、
他の要素がどんどん横にながれこんできて困ったことはありませか?

たとえばこんな感じに。。。

右はwidth:100px;
height:100px;
margin:10px;
background:#f00;
float:left;
でcssを設定しております。
この赤い四角の下に現在文字が回りこんでいるという状態になります。

こんな感じで表現したいときは問題ないのですが、下の感じになると困りますよね。。

赤の四角のCSSは同じで、
今度はこのテキスを囲っているdivにfloat:right;を設置しています。
(テキストの幅は右の全体から赤い四角と1文字分の幅を引いた幅で設定)

この部分は先ほどのdivの外に記述しています。

上のケースの場合、赤の四角とテキストが入ったdivの下に黄色マーカー部分が表示されるイメージがしますが、回り込みが継続していることで、意図としない位置に表示されてしまったことになります。

ソースはこんな感じです。

このような問題を解決する方法は2通りあります。
今回は、この2つの方法をご紹介いたします。

【css】clearを使う

解除したい要素にclear:both;を設定すると回り込みを解除できます。

赤の四角のCSSは同じで、
このテキスを囲っているdivにfloat:right;を設置しています。
(テキストの幅は右の全体から赤い四角と1文字分の幅を引いた幅で設定)

この部分にclear:both;を設定しています

外部cssにこの設定をしておくと便利です。

これが記述されているとclass=”clear”で簡単に解除設定ができます。

clearfixを使って解除

clearfixはclearとはまた違って、回り込みのある要素を一つのボックスに閉じ込めてその外の要素に回り込みの影響が及ばないようにする方法です。
先ほど挙げたサンプルを例に解説します。

赤の四角のCSSは同じで、
このテキスを囲っているdivにfloat:right;を設置しています。
(テキストの幅は右の全体から赤い四角と1文字分の幅を引いた幅で設定)

clearfixの外の要素に回り込みの影響がでません

clearfixの中身(css)についてはこちらをご参照ください。

【css】2020年!clearfix最新の設定はこれ!
floatの回り込み解除の方法としてよく使用されるclearfixですが、一時期は多くの旧ブラウザーに対応する必要があり、書き方も複雑なものが多くありました。しかし、最近ではインタネットエクスプローラー(IE)の古いバージョンへの対応が必要