floatによる回り込み解除のことでどうしてもわからないことがあります。

Question

floatの回り込み解除について、いくつか方法があると思いますが、
clearを使う場合の解除方法で納得できていないことがあります。

基本的にfloatの回り込み解除は親要素のcontainerが高さを失なったときなどに、背景を正しく表示するために行うものだと聞きました。

ただ、どうしてclearで回り込みを解除されたのに、floatすべてがリセットされて要素が全て回り込みの前の縦並びの状態に戻らず、背景だけ（親要素だけ）が元に戻る（回り込みが解除される）のでしょうか？

習いたてのため、質問内容がおかしな部分があると思いますが、そこも含めてご教示いただけますと幸いです。

Answer 1

floatの効果

floatを使うと下記の現象が起こります。

• 親要素に子要素の高さが反映されなくなります。
• なので、子要素全てにfloatが指定されている場合、親要素の高さは0になります。

このままだと親要素に背景色等を設定しても正しく反映されないため、clearプロパティと併用することになります。

当初の使い方

初めは改行タグなどにclearプロパティを設定したり、
回り込みを解除したいタグに直接clearプロパティを設定するやり方でした。
回り込みを解除する使い方はこれが基本です。

回り込みが解除されているのはclearが指定されている要素以降のものだと分かると思います。

.clear {    
 clear:both;
}

.fl {
 float:left;
}

<p class="fl">aaa</p>
<p class="fl">bbb</p>
<p class="fl">ccc</p>
<br class="clear">
<p>ddd</p>

<p class="fl">aaa</p>
<p class="fl">bbb</p>
<p class="fl">ccc</p>
<p class="clear">ddd</p>

clearfixというやり方

上記の使い方を少し発展させて、親要素のafter疑似要素を利用して、
結果的に上記と同じ様に回り込みを解除するパターンが考案されました。
これがclearfixの方法です。

.cf:after {    
  content: "";
  display: block;
  clear: both;
}

<div class="cf">    
  <p class="fl">aaa</p>
  <p class="fl">bbb</p>
  <p class="fl">ccc</p>
 <!-- ここに擬似要素が挿入されて回り込みが解除される -->
</div>

<p>ddd</p>

Comments

[bigin]

ご丁寧な説明ありがとうございます。

Answer 2

floatすべてがリセットされて要素が全て回り込みの前の縦並びの状態に戻らず

clearはそれ以降の要素に対して効くからでは。

背景だけ（親要素だけ）が元に戻る（回り込みが解除される）のでしょうか？

高さが確定するからでは。

【CSSの【float】についてちょっと本気出して説明してみた。 | たねっぱ！】
http://taneppa.net/float/

Comments

[bigin]

ご回答ありがとうございます。参照ページも拝読しました。
clearはそれ以降の要素に対して効く➡「floatがすべて解除された空divがfloat:leftおよびrightされた要素の下に並び（ブロック要素的に）、背景（親要素）が包括する要素の範囲が広がることで親要素の回り込みが解除される」ということで理解あっていますか？

[kei344]

> 親要素の回り込みが解除される
floatした要素の親要素は別に回り込み指定はされていないと思います。

[bigin]

ありがとうございます！