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

初心者向けにCSSでfloatの中にfloatを使う方法について解説しています。最初にfloatプロパティの基本と使用時の注意点について説明します。次にfloatの中にfloatを使う場合の書き方と動作について見ていきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

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

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

 

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

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

floatの中にfloatを使う方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

使用する場面

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

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

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

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では初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

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