[CSS] 回り込み(float)を解除する3つの方法 | Select *
Web Web制作

[CSS] 回り込み(float)を解除する3つの方法

clear-floatオハヨウゴザイマス!
Webエンジニアの@deepblue_willです。

たまにはWeb制作のことでも書きたくなったので、floatによる回り込みの解除について書こうかなと思います。
いろいろ方法があるので、それを紹介していきます。




clear:bothを使う方法

一番一般的な方法かなと思うclearプロパティを使う方法です。
clear:bothという要素を入れると、その要素から回りこみが解除されます。



また、親要素の擬似要素afterに入れても解除できます。
この方法だと余計なタグいれなくてすみます。
この手法はclearfixと呼ばれます。
いろいろ書き方はあるようですが、一番シンプルなのは以下の方法かなと思います。


overflow:hiddenを使う方法

overflowプロパティはボックスのはみ出した部分をどう表現するか指定できるプロパティです。
非表示にしたり、スクロールバーにしたりできます。
そのoverflowプロパティですが、回り込みの解除にも使えます。
親要素にoverflow:hiddenを入れるだけです。
clearfixより難しくないのでいいですね。



fieldsetタグを使う方法

これが一番簡単な方法かもしれません。
フォームをグループピングするためのfieldsetタグで囲むと回り込みが解除されます。
下の例のようにdivタグをまとめるのに使うのはよろしくないのですが。。



最後に

私の場合はoverflowプロパティを使う方法と、場合によってはfieldsetタグで回り込みを解除しています。
特にfieldsetタグでの解除方法はあんまり一般的ではないみたいなので、良いのか悪いのか判断しかねるのですがタグだけで解除できのは便利のなので使っています。
もし、他にいい方法があるのであれば教えていただけると嬉しいです。

ではでは。

このブログをRSS登録する! この記事をはてブする!

Comment

Zenback

Categories

  • Lifehack (57)
  • Web (140)
  • まとめ (172)
  • コンピュータ (132)
  • 仕事 (10)
  • 趣味 (104)
  • 雑記 (88)