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

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

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

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

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

<p>右はwidth:100px;<br>

height:100px;<br>

margin:10px;<br>

background:#f00;<br>

float:left;<br>

でcssを設定しております。<br>

この赤い四角の下に現在文字が回りこんでいるという状態になります。</p>

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

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

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

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

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

<div style="width:100px;height:100px; margin:10px; background:#f00; float:left;"></div>
<div style="float:right; width:calc(100% - 150px);">
<p>赤の四角のCSSは同じで、<br>
今度はこのテキスを囲っているdivにfloat:right;を設置しています。<br>
(テキストの幅は右の全体から赤い四角分を引いた幅で設定)</p>
</div>
<p class="marker">この部分は先ほどのdivの外に記述しています。</p>

<p>赤の四角のCSSは同じで、<br>

今度はこのテキスを囲っているdivにfloat:right;を設置しています。<br>

(テキストの幅は右の全体から赤い四角分を引いた幅で設定)</p>

</div>

<p class="marker">この部分は先ほどのdivの外に記述しています。</p>

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

【css】clearを使う
clearfixを使って解除

【css】clearを使う

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

<div style="width:100px;height:100px; margin:10px; background:#f00; float:left;"></div>
<div style="float:right; width:calc(100% - 150px);">
<p>赤の四角のCSSは同じで、<br>
このテキスを囲っているdivにfloat:right;を設置しています。<br>
(テキストの幅は右の全体から赤い四角と１文字分の幅を引いた幅で設定) </p>
</div>
<p style="clear:both;" class="marker">この部分にclear:both;を設定しています</p>

<p>赤の四角のCSSは同じで、<br>

このテキスを囲っているdivにfloat:right;を設置しています。<br>

(テキストの幅は右の全体から赤い四角と１文字分の幅を引いた幅で設定) </p>

</div>

<p style="clear:both;" class="marker">この部分にclear:both;を設定しています</p>

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

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

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

.clear{
	clear:both;
}

.clear{

clear:both;

}

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

clearfixを使って解除

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

<!--↓↓clearfixここまで-->
<div class="clearfix">
<div style="width:100px;height:100px; margin:10px; background:#f00; float:left;"></div>
<div style="float:right; width:calc(100% - 150px);">
<p>赤の四角のCSSは同じで、<br>
このテキスを囲っているdivにfloat:right;を設置しています。<br>
(テキストの幅は右の全体から赤い四角と１文字分の幅を引いた幅で設定) </p>
</div>
</div>
<!--↑↑clearfixここまで-->
<p class="marker">clearfixの外の要素に回り込みの影響がでません</p>