要素を右側、もしくは左側に寄せるとき良く使われる「float」ですが、今回はこれの解除の方法について。
CSSを勉強したての頃は、回り込みをしたい要素の下の要素に影響して表示が崩れ、悩まされたことがありました…。
今回参考にしたサイトはこちら。
方法だけでなく、デメリットも記載されており、とても参考になります。
まずは、回り込みの記述についてはこちら。
/* 左側への回り込み */
div {
float: left;
}
この記述があると、指定された要素（今回はdiv）が左寄せになります。
なお、あとに続く要素はその反対側に回り込みます。
で、これを解除する方法は、まず単純に「clear:both」を指定する方法。
■ clear:both;
<div class="left">
左寄せ
</div>
<div class="clear">
左寄せ 解除
</div>
.left{
float: left;
}
.clear{
clear: both;
}
こんな感じで、左寄せ、もしくは右寄せした要素の後ろで指定します。
これは一番わかりやすいかな？
ただし、要素を追加する必要があるため、少し使いにくい場面がありそうです。
そのため、私が今回使ったのがこちら。
■ overflow:hidden;
子要素に float が指定してある場合、親要素にこの「overflow:hidden;」を指定する方法です。
これを指定することで、親要素が高さを持つので、回り込みを回避できるとのことですが…原理はいまいちわかっていません。
ただ、clear: both; と違って、要素を追加せずに済むため、これが一番使いやすいのではないかと思いますね。
あと、使ってみたいのがこちら。
■ clearfix（クリアフィックス）
親要素にこのclearfixを指定すると、最後に子要素をCSSで擬似的に作り出し、それにclear: both;を指定してfloatを解除しているのだとか。
<div class="parent">
<div class="child">要素1</div>
<div class="child">要素2</div>
<div class="child">要素3</div>
</div>
.parent:after {
clear:both
}
.child {
float: left;
}
以上、回り込みの解除方法でした。
個人的なおすすめは overflow:hidden; ですね。
