CSSでfloatの中にfloatを使う方法を現役エンジニアが解説【初心者向け】

CSSでfloatの中にfloatを使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

 

 

目次

• 使用する場面
• floatを使う注意点
• スタイルが上手くいかない原因と対処法
• floatの中にfloatを使ってみよう

 

使用する場面

floatは要素を浮動化させるプロパティです。ちなみにfloatには英語で”浮く”という意味があります。通常のブロックは縦に並びますが、floatを使うことによって、ブロックを右や左に寄せることができます。

右に画像、左に文章のようなレイアウトなど、要素を横に並べたいような場合に使用します。

 

[PR] Webデザインで副業する学習方法を動画で公開中

floatを使う注意点

floatしたブロックは浮いている（浮動化している）ため、高さが計算されないという点に注意が必要です。

下記の例を参照してみてください。

See the Pen
jObVMmB by marihashimoto (@mari877)
on CodePen.

上のボックスは水色のボックスに赤色のボックスがおさまるようになっていますが、下のボックスでは、floatした中の要素が水色の親のボックスからはみ出してしまっています。

また、floatさせた要素の後続の要素についても、floatさせた要素の高さが無視されてしまうので、下記のように下のボックスが上に食い込んでしまいます。

HTMLの一番下に記述している水色のボックスが黄色いボックスの下敷きになってしまっています。

See the Pen
LYpbxzO by marihashimoto (@mari877)
on CodePen.

 

このような現象が起こることを踏まえてコーディングしていく必要があります。

 

スタイルが上手くいかない原因と対処法

上記のような現象を解消するための方法として、clearfixという方法があります。

左右に並べたい要素（floatを適用する要素）をdivタグなどで囲むような構造にします。囲んでいる要素の::after（擬似要素）に下記のようなCSSを適用します。

CSS（clearfix）：

floatした要素の親要素のセレクタ::after {
  content: '';
  display: block;
  clear: both;
}

一般的に、clearfixというクラスに上記のCSSを定義しておいて、親要素にclearfixというクラス名をつけて使います。

HTML：

<div class="box clearfix">
  <div class="child1">float:Left</div>
  <div class="child2">float:right</div>
</div>
<div class="box">float:none</div>

CSS：

div{
  box-sizing:border-box;
}
.box{
  padding:30px;
  margin:20px;
  background:skyblue;
}
.child1{
  width:50%;
  padding:30px;
  float:left;
  background:yellow;
}
.child2{
  width:50%;
  padding:30px;
  float:right;
  background:orange;
}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

表示は以下のようになります。水色のボックスが、floatしたオレンジと黄色のボックスの高さを含んでいます。CodePenの clearfix クラスを外して表示を確認してみると違いがわかりやすいです。

 

See the Pen
ZEbBBOm by marihashimoto (@mari877)
on CodePen.

 

floatの中にfloatを使ってみよう

 

上記のことを踏まえて、HTMLの構造に注意しながら、floatの中にfloatが入ったレイアウトを作ってみます。

See the Pen
xxwRRXb by marihashimoto (@mari877)
on CodePen.

 

黄色、オレンジ、水色のボックスはfloatしている要素です。各要素の高さがしっかり反映されるようにHTMLを組み立てることと、clearfixをうまく使えば、いろんなレイアウトを作ることが可能です。

HTML：

<div class="wrap clearfix">
  <div class="box">
    float:left<br>
    <div class="child1">float:Left</div>
    <div class="child1">float:Left</div>
  </div>

  <div class="box">
    float:left<br>
    <div class="child2">float:Left</div>
    <div class="child2">float:Left</div>
  </div>
</div>
<div class="bottom">float:none;</div>

CSS：

div{
  box-sizing:border-box;
}
.wrap{
  padding:20px;
  background:lightpink;
}
.box{
  width:45%;
  padding:30px;
  margin:0 2.5%;
  float:left;
  background:skyblue;
}
.child1{
  width:30%;
  padding:30px 0;
  margin:10px;
  text-align:center;
  float:left;
  background:yellow;
}
.child2{
  width:30%;
  padding:30px;
  margin:10px;
  text-align:center;
  float:right;
  background:orange;
}
.bottom{
  padding:30px;
  background:tomato;
}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

 

監修してくれたメンター

橋本真理 web/グラフィックデザイナー webサイトのデザイン、コーディングから公開・運用等、またロゴや各種広告などのデザインやイラストを描いたり、日々楽しくお仕事しています。 TechAcademyではWebデザインコース・WordPressコースを担当。趣味は、ラジオと音楽と踊ること。自慢は目がいいこと。

 

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。