floatを使った際の表示の崩れを正すためによく使われるclearfixですが、それを使わずともfloatを簡単に解除する方法をご紹介します。
HTML
1 | <div class="sampleBox"> |
2 | <div class="boxLeft"> |
3 | <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p> |
4 | </div> |
5 | <div class="boxRight"> |
6 | <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p> |
7 | </div> |
8 | </div> |
CSS
01 | .sampleBox { |
02 | overflow: hidden ; |
03 | } |
04 | .boxLeft { |
05 | float: left; |
06 | width: 150px; |
07 | } |
08 | .boxRight { |
09 | float: right; |
10 | width: 150px; |
11 | } |
サンプルページ
ポイントとしては、floatする要素をdivで囲み、そのdivにoverflow: hiddenを適用させることです。たったこれだけで、floatによる表示の崩れを解消することが可能です。
これまでclearfixを使ってきた方も、これを機にこちらの方法に切り替えてみてはいかがでしょうか。
