CSSで回り込みを解除する方法

cssを記述していくと（float）プロパティを利用して、div要素を指定した位置に配置していくことでデザインを作り込んでいくことになると思います。

しかし、この（float）プロパティは解除を行わないと、上に配置されているdiv要素のfloatにより、下に配置された要素が回りこんでしまったりして、デザインを崩れさせてしまいます。

そんなデザインの崩れを防ぐために、今回は回りこみの解除の方法をご紹介します。

回りこみの解除の仕方

clear プロパティを利用する

floatを解除する方法の中で一番簡単なのは、（clear）プロパティを利用することです。

回りこみ解除用のセレクタを作成し、（clear:both）と記述しておきます。後は、回りこみを解除したいボックスの最後にこのセレクタを配置することで、回りこみが解除されます。

（both）は左右のフロートを解除する値です。左フロートの回りこみを解除したい場合は値をleftに、右フロートの回りこみを解除したい場合はrightを記述してください。

overflow プロパティを利用する

（overflow:hidden）の記述を親要素に加えることで、回りこみを解除します。

簡単に回りこみが解除できる反面注意しないといけない点もあります。（overflow）とは、元々は切り抜くためのプロパティなので、はみ出した部分は切り取られて表示されません。

:after 擬似要素を利用する

floatプロパティが含まれている、親要素の（:after）擬似要素に、以下の記述を追加することで、親要素自体がfloatの解除を行うこともできます。

基本的には、clearプロパティが一般的ですので、まずclearプロパティを覚えて、それでも不具合が起こる際に他の方法を検討する様にしましょう。