サイトを作成すると、必ずと言っていいほどfloatというプロパティで要素を右や左に寄せます。ただ、これが厄介で、一回floatプロパティが設定された要素が出てくると、その後ろの要素全てが回り込んでしまいます。他にも、floatした要素の親要素の高さが０になってしまうなど、いろいろマズいことが起こります。これを賢く改善しましょう。
スポンサーリンクとりあえず理解すべき方法：空のdivでclear:both
ぶっちゃけ、CSSを触りたくない人、動けばいいやというレベルの人であれば、これでも十分だと思います。
やり方は、ただ以下のdivを、回り込みを解除したいところに挿入するだけです。例えば、floatプロパティが設定されている要素がたくさん配置してある直後などです。
<div style="clear:both;"></div>
ただ、無意味なdivを追加するのに抵抗感がある方は、次に紹介する方法を使ってみてください。
スポンサーリンク最もカッコイイ方法：疑似要素を使う
いったい何をやっている記述なのかわからないかもしれませんが、とりあえずこれをご覧ください。
HTMLは例えばこんな感じになっているとします。
<div class="clearfix">
<div style="float:right;"><p>hogehoge</p></div>
</div>
CSSは
.clearfix:after {
content: "";
clear: both;
display: block;
}
このようなCSSを書いた場合、clearfixクラスを持つ要素の最後で回り込みが解除されます。簡単に言うと、「１番目の方法のdivが存在しないバージョン」とかですかね。結局やってることはほぼ同じです。clearfixクラスが指定された要素の最後に、１番目の方法のdivが見えないけど挿入されてる感じだと思っていただければ大丈夫です。
疑似要素はうまく使用するといろいろ楽ができたりするので、ググってみていただければ勉強になると思います！たとえばこんなこともできたりします。
ご覧いただきありがとうございました。