具体例付き！floatの使い方【横並び・解除・レスポンシブ】

floatを使ったらデザインが崩れた、という経験がある人は多いと思います。
今回は、floatの使い方、解除方法からレスポンシブ対応まで、実際のサイトで使われる形で紹介します。

floatのコーディング例
解説① floatの使い方・記述方法
解説② floatの解除
解説③ floatのレスポンシブ対応

floatのコーディング例

それでは実際に、floatでテキスト（見出しと本文）と画像を横並びにしてみます。
完成図は下の通りです。テキストと画像が横並びになっているボックスを縦に3つ並べました。
画面幅を狭めると、テキストと画像は縦に並びます。

見出しも含めてfloat

ここに本文が入ります。ここに本文が入りますここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入りますここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入りますここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入りますここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入りますここに本文が入ります。ここに本文が入ります。ここに本文が入ります。

見出しを外してfloat(画像が右)

見出しを外してfloat(画像が左)

HTMLとCSS

HTMLとCSSの記述は以下の通りです。

HTML

本文(ここに本文が入ります。)は長いため省略しています。

<div class="wrap cf">
  <div class="text">
    <h1>見出しも含めてfloat</h1>
    <p>
      ここに本文が入ります。ここに本文が入りますここに本文が入ります。
     <p>
  </div>
  <img src="https://placehold.jp/150x150.png" class="right">
</div>

<div class="wrap cf">
  <h1>見出しを外してfloat(画像が右)</h1>
  <div class="text">
    <p>
      ここに本文が入ります。ここに本文が入りますここに本文が入ります。
     <p>
  </div>
  <img src="https://placehold.jp/150x150.png" class="right">
</div>

<div class="wrap cf">
  <h1>見出しを外してfloat(画像が左)</h1>
  <img src="https://placehold.jp/150x150.png" class="left">
  <div class="text">
    <p>
      ここに本文が入ります。ここに本文が入りますここに本文が入ります。
     <p>
  </div>
</div>

<h1>見出しも含めてfloat</h1>

<p>

ここに本文が入ります。ここに本文が入りますここに本文が入ります。

<p>

</div>

</div>

<h1>見出しを外してfloat(画像が右)</h1>

<p>

ここに本文が入ります。ここに本文が入りますここに本文が入ります。

<p>

</div>

</div>

<h1>見出しを外してfloat(画像が左)</h1>

<p>

ここに本文が入ります。ここに本文が入りますここに本文が入ります。

<p>

</div>

CSS

cssについては、floatと関係ない見出しの装飾・余白の指定は記載していません。

.text{
  float:left;
/*  テキストボックスのサイズ指定 画像サイズ150px＋margin20px  */
  width:calc(100% - 170px);
}
img{
  float:left;
}
img.right{
/*  画像が右の場合  */
  margin-left:20px;
}
img.left{
/*  画像が左の場合  */
  margin-right:20px;
}
/*  floatを解除  */
.cf:before,.cf:after{
  content:"";
  display:table;
}
.cf:after{
  clear:both;
}
.cf{
  zoom:1;
}
/*  レスポンシブ  */
@media screen and (max-width:768px){
  .text,img{
    float:none;
  }
  .text{
    width:100%;
  }
  img.right,
  img.left{
    display:block;
    margin:10px auto;
  }
}

.text{

float:left;

/* テキストボックスのサイズ指定画像サイズ150px＋margin20px */

width:calc(100% - 170px);

}

img{

float:left;

}

img.right{

/* 画像が右の場合 */

margin-left:20px;

}

img.left{

/* 画像が左の場合 */

margin-right:20px;

}

/* floatを解除 */

.cf:before,.cf:after{

content:"";

display:table;

}

.cf:after{

clear:both;

}

.cf{

zoom:1;

}

/* レスポンシブ */

@media screen and (max-width:768px){

.text,img{

float:none;

}

.text{

width:100%;

}

img.right,

img.left{

display:block;

margin:10px auto;

}

解説① floatの使い方・記述方法

どのような指定になっているのか、部分ごとに見ていきます。

.text{
  float:left;
/*  テキストボックスのサイズ指定 画像サイズ150px＋margin20px  */
  width:calc(100% - 170px);
}
img{
  float:left;
}
img.right{
/*  画像が右の場合  */
  margin-left:20px;
}
img.left{
/*  画像が左の場合  */
  margin-right:20px;
}

.text{

float:left;

/* テキストボックスのサイズ指定画像サイズ150px＋margin20px */

width:calc(100% - 170px);

}

img{

float:left;

}

img.right{

/* 画像が右の場合 */

margin-left:20px;

}

img.left{

/* 画像が左の場合 */

margin-right:20px;

}

テキストと画像に「float:left」を指定して横並びにしています。
余談ですが、今回はwidthの指定にcalcを使用しました。
calcを使うとわざわざ画像や余白のサイズ計算をする必要がないのでおすすめです。

解説② floatの解除

floatは、そもそも 要素を浮かせる＝高さを認識しなくなる ため、次の要素と重なる、背景が表示されなくなる、といったデザイン崩れが起こります。
そのため、floatを指定した後には、floatを解除するための指定 clear:both が必要です。
今回は、clearfixという方法を使ってclear:bothを指定し、floatを解除しています。

通常、floatした次の要素にclear:bothを指定することで回り込みが解除できます。
clearfixでは、親要素のクラスに対して疑似的に要素を作成します。（疑似要素）
floatした要素の後に疑似要素を作り、その疑似要素に対してclear:bothを指定することでfloatを解除しています。

clearfixは色々な書き方がありますが、今回は以下の指定をしています。

/*  floatを解除  */
.cf:before,.cf:after{
  content:"";
  display:table;
}
.cf:after{
  clear:both;
}
.cf{
  zoom:1;/* IE 6/7用*/
}

/* floatを解除 */

.cf:before,.cf:after{

content:"";

display:table;

}

.cf:after{

clear:both;

}

.cf{

zoom:1;/* IE 6/7用*/

}

解説③ floatのレスポンシブ対応

モバイル・タブレットで見たときは画像と本文が縦に並ぶようにします。

@media screen and (max-width:768px){
  .text,img{
    float:none;
  }
  .text{
    width:100%;
  }
  img.right,
  img.left{
    display:block;
    margin:0 auto;
  }
}