低価格・高品質・最速のHTMLコーディングはクロノドライブへ

たった一行でclearfixを使わずにfloatを解除するテクニック

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を使ってきた方も、これを機にこちらの方法に切り替えてみてはいかがでしょうか。

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ