賢く回り込み(float)解除する方法


サイトを作成すると、必ずと言っていいほどfloatというプロパティで要素を右や左に寄せます。ただ、これが厄介で、一回floatプロパティが設定された要素が出てくると、その後ろの要素全てが回り込んでしまいます。他にも、floatした要素の親要素の高さが0になってしまうなど、いろいろマズいことが起こります。これを賢く改善しましょう。

スポンサーリンク

とりあえず理解すべき方法:空の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クラスを持つ要素の最後で回り込みが解除されます。簡単に言うと、「1番目の方法のdivが存在しないバージョン」とかですかね。結局やってることはほぼ同じです。clearfixクラスが指定された要素の最後に、1番目の方法のdivが見えないけど挿入されてる感じだと思っていただければ大丈夫です。

疑似要素はうまく使用するといろいろ楽ができたりするので、ググってみていただければ勉強になると思います!たとえばこんなこともできたりします。

ご覧いただきありがとうございました。

この記事への感想を教えてください
  • 内容が十分
  • 内容が足りなかったが役立った
  • 内容が足りず役立たなかった
  • 求めている記事ではなかった
last

フォローする