ZeroPlus Media > Web制作 > HTML/CSS > 【CSS】floatの使い方を解説！3つの解除方法も完全マスター

【CSS】floatの使い方を解説！3つの解除方法も完全マスター

2022/08/06

2023/06/02

CSS floatを使えば横並びのレイアウトを作れますが、一方で思うようにレイアウトが組めないと悩む場合があるでしょう。レイアウトを難しくしている原因は、floatを指定した要素が「浮いた状態」になる特性によるものです。

そのためfloatを使う際には、floatを解除する方法もセットで知る必要があります。

この記事ではCSS floatの使い方と、解除方法を併せて解説します。最後までお読みいただけますとfloatの特性を理解しつつ、自在に要素をレイアウトできるようになります。

この記事で身につく内容

floatの使い方
floatの特性
floatの解除方法

floatとは？
floatの使い方を解説
独学でWeb制作を学ぶあなたへ
- floatの使い所
floatが上手く効かない原因である「要素の回り込み」
まとめ

floatとは？

floatとは横並びのレイアウトを作成できるCSSプロパティです。まずは下の画像をご覧ください。

画像右側のようにHTMLで書いた要素は縦に並びます。一方floatを使えば、画面左側のように横並びのレイアウトへ変更できます。

floatの使い方を解説

ここからはfloatの使い方を紹介します。横並びにしたい要素に対して、float: 値;を指定して使用します。値に記述するのは、以下のような「方向」を示すワードです。

値	指定内容
left	横並びにした要素を左へ寄せる
right	横並びにした要素を右へ寄せる
none	（初期値）横並びの配置を指定しない

要素を横並びにした後、左右どちらに配置させるかによってleftとrightを使い分けます。なおnoneは初期値のため、通常使うことはありません。次からはそれぞれの値を指定したときの違いについて、詳しく解説していきます。

1.left

floatの値にleftを指定すると、画面に対し左寄せされた状態で横並びにレイアウトされます。サンプルコードで確認してみましょう。

 <ul class="menu-list">
    <li class="soda">ソーダフロート</li>   
    <li class="coke">コーラフロート</li>   
    <li class="coffee">コーヒーフロート</li> 
 </ul>

floatを指定しない状態では、以下のように表示されます。

それぞれの要素にfloat: left;を指定しましょう。

.soda, .coke, .coffee {
   　float: left;
}

要素が左寄せで配置されました。

2.right

floatの値にrightを指定すると、画面に対して右寄せされた状態で横並びにレイアウトされます。

.soda, .coke, .coffee {
  　 float: right;
}

要素が右に寄せられました。このとき横並びの要素の順番にも注目しましょう。HTMLで最初に書いた要素が一番右に配置され、後続の要素が左に向かって配置されます。

3.none

noneは初期値（floatを指定していない状態の値）です。普段あまり使用することはありません。ただしWebサイトをレスポンシブ対応にする場合には、もともと指定しているfloat: left;やfloat: right;を打ち消すために使用することがあります。

用語解説：レスポンシブ対応レスポンシブ対応とはパソコン・スマホ・タブレットなど、画面サイズの異なるデバイスでWebサイトを閲覧しても、最適なレイアウトで表示させる技術のことです。パソコンのWebサイト用に横並びのレイアウトで組んでも、スマホでの表示ではレイアウト崩れを起こすことがあります。

下の画像をご覧ください。

スマホ向けのレイアウトのみfloatの指定を打ち消すために、float: none;を使うことがある点を押さえておきましょう。

独学でWeb制作を学ぶあなたへ

現在Webサイトの制作方法を独学し、副業で稼ぎたいと思っているあなたへお伝えしたいことがあります。

横並びのレイアウトを作成する際、現場ではfloatプロパティはあまり使われなくなっています。その代わりにflexboxといった比較的新しい技術が横並びのレイアウトに使われています。

独学の問題点として「現場で使われている技術」と「あまり使われなくなった技術」を区別して学べない点が挙げられます。そのため独学では目標に対して、遠回りをしてしまう可能性があります。早く稼ぎたいと思うならば、少し不安になりますよね。

そんなあなたへ、無料で30日間Webサイト制作をしっかり学べるプログラミングスクール「ZeroPlus Gate」の利用をおすすめします。

現場で使われている技術を中心とした50種類の教材でWebサイトの作り方を学べるのが、ZeroPlus Gateのカリキュラムの特徴です。専属のメンターがつくため、わからないことは質問して解決できます。

ZeroPlus Gateに参加して、Webサイトを作る技術を身につけてみませんか？お申し込みは以下のリンクより承っています。

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

あなたの参加を、心よりお待ちしています！

floatの使い所

現在、横並びにするレイアウトにはfloatよりも、レイアウト調節が行いやすいflexboxが使われています。

とはいえWeb制作を仕事として請け負うことを目指すならば、もちろんfloatを使って横並びのレイアウトを組む方法も知っておくのがベターです。たとえば以下のように画像やボックスの周囲にテキストを回り込ませるようなレイアウトは、flexboxでは実現できません。

画像左側のように、ボックスの周りをテキストが回り込むようなレイアウトは、floatで作る必要があります。

floatが上手く効かない原因である「要素の回り込み」

floatで思いどおりのレイアウトが作れないと悩むとき、原因になるのは「要素の回り込み」によるものであることが多いです。

要素の回り込みとは

要素の回り込みについて解説します。以下のように色付きのボックスを3つ用意しました。

ソースコードは以下のようになります。

 <div class="soda"></div>   
 <div class="coke"></div>   
 <div class="coffee"></div>

.soda {
   　background-color: #00e53d;
   　height: 100px;
   　width: 100px;
}

.coke {
　　　background-color: #fe001a;
　　　height: 100px;
　　　width: 100px;
}

.coffee {
     background-color: #834f2f;
　　　height: 130px;
　　　width: 300px;
}

それぞれのボックスにfloat: left;を指定してみましょう。

.soda {
    background-color: #00e53d;
    height: 100px;
    width: 100px;
    float: left;
}

.coke {
    background-color: #fe001a;
    height: 100px;
    width: 100px;
    float: left;
}

.coffee {
    background-color: #834f2f;
    height: 130px;
    width: 300px;
    float: left;
}

3つのボックスが横並びになりました。ここで3つ目のボックス（クラス名：coffee）のみ、以下のように縦に並ぶようにしてみましょう。

ためしに3つ目のボックス（クラス:coffee）のみfloat: left;を外してみます。

.soda {
    background-color: #00e53d;
    height: 100px;
    width: 100px;
    float: left;
}

.coke {
    background-color: #fe001a;
    height: 100px;
    width: 100px;
    float: left;
}
 
.coffee {
    background-color: #834f2f;
    height: 130px;
    width: 300px;
}

単純にfloat: left;を外すのみでは思うようなレイアウトは作れませんでした。このとき、まさに「要素の回り込み」が発生しています。floatという単語には「浮かせる」という意味があり、以下のようにfloatを指定した要素は浮かんでいる状態にあります。

floatの指定を削除したボックスは浮かんだ状態が解除され、floatした要素の下に回り込んでいます。要素の回り込みとはこうした現象です。

回り込みによりレイアウトが崩れる場合には、途中でfloatを解除する必要があります。

floatを解除する3つの方法

floatを解除する方法を3つ紹介します。

要素へclear: both;を指定する
clearfixを使う
親要素へoverflow: hidden;

これらの方法を駆使して要素の回り込みへ対処ができるようになれば、floatの使い方をマスターできたも同然です。

①要素へclear: both;を指定するclearとはfloatにより発生した要素の回り込みを打ち消すプロパティです。値のbothとは「両方」を意味し、float: right;とfloat: left;の両方に対して要素の回り込みを打ち消すことができます。

clear: both;は回り込んでしまった要素（クラス名: coffee）に直接当てて使います。

.soda {
    background-color: #00e53d;
    height: 100px;
    width: 100px;
    float: left;
}

.coke {
    background-color: #fe001a;
    height: 100px;
    width: 100px;
    float: left;
}

.coffee {
    background-color: #834f2f;
    height: 130px;
    width: 300px;
    clear: both;/*要素の打ち消し */
}

clear: both;を、先ほどのレイアウトで回り込んでしまったボックス（クラス名: coffee）に当ててみましょう。

かんたんに要素の回り込みを解除できました。

②clearfixclearfixはclearと違ってCSSプロパティではなく、要素の回り込みを解除するテクニックのことを指します。clearより手法は少し複雑です。まずは横並びにしたレイアウトの親要素にclearfixというクラス名を付与します。

<div class="clearfix">
    <div class="soda"></div>   
    <div class="coke"></div>   
</div>
<div class="coffee"></div>

そしてCSSでclearfixに擬似要素afterを作成し、clear:both;を指定します。

.coke {
    background-color: #fe001a;
    height: 100px;
    width: 100px;
    float: left;
}

.soda {
    background-color: #00e53d;
    height: 100px;
    width: 100px;
    float: left;
}
.coffee {  
    background-color: #834f2f;
    height: 130px;
    width: 300px;
}

/* clearfixを使って回り込みを解除 */

.clearfix::after {
    content:'';
    display: block; 
    clear:both;
}

このようにして、floatによる要素の回り込みを解除できます。

用語解説：擬似要素「after」ここで擬似要素afterについて解説します。擬似要素とは要素の装飾を目的として、CSSで作られる擬似的な要素のことを指します。afterは擬似要素の種類の一つで、要素の後ろに装飾を作るときに使います。

下のようにclearfixクラスの後ろに見えない擬似要素をつくり、clear: both;を作ることで要素の回り込みを解除しています。

③親要素へoverflow: hidden;を指定する

最後に紹介するのは、回り込みを解除したい箇所の親要素へoverflow: hidden;を指定する方法です。

<div class="container">
   <div class="soda"></div>   
   <div class="coke"></div>   
</div>
<div class="coffee"></div>

/* 親要素containerへoverflow: hidden;を指定して要素の回り込みを解除 */
.container {
    overflow: hidden;
}

.coke {
    background-color: #fe001a;
    height: 100px;
    width: 100px;
    float: left;
}

.soda {
    background-color: #00e53d;
    height: 100px;
    width: 100px;
    float: left;
}

.coffee { 
    background-color: #834f2f;
    height: 130px;
    width: 300px;
}

簡単に要素の回り込みを解除できました。

用語解説：overflowプロパティoverflowプロパティとは本来要素のはみ出しの部分をどのように処置するかを指定するために使われます。そのため今回紹介した「要素の回り込みを防ぐ目的」でoverflowを使うのは特殊です。

overflow: hidden;を指定することにより、floatで浮き上がった要素の高さを感知できるようになるため、後に続く要素が回り込まなくなるのです。overflowについてはこちらの記事で詳しく解説していますのでご覧ください。

【CSS】overflowの使い方解説！要素のはみ出し解決

こちらをお読みいただきますと、overflowプロパティ本来の使い方を理解できるようになります。

要素の回り込みを解除する方法はどれを使うべきか？

要素の回り込みを防ぐための方法はいくつもあるため、どれを使うか迷いますよね。結論としては、なるべくclearfixを使用するのがおすすめです。

理由は以下の2点です。

誰がみても理解しやすい正しい文書構造でHTMLを書くことができる
作成したレイアウトへ影響を与えない

clearfixとoverflow: hidden;はfloatで横並びしたレイアウトの親要素に指定します。一方、clearは回り込みを解除したい箇所に、子要素を作成して指定する使い方が主となります。そのため、意味を持たないdivタグやspanタグが、clear: both;を指定するためだけに、作成される傾向にあります。これによって、HTMLの文章構造が崩れるリスクがあるのです。

またoverflow: hidden;については、本来は親要素から子要素がはみ出したときに非表示にする指定です。はみ出しを活かしたレイアウトを作成するときに、思いがけず要素が非表示になってしまうデメリットもあります。以下にそれぞれの方法の特徴を表にまとめました。

	指定する要素	メリット	デメリット
clear:both;	子要素	指定方法が簡単	HTMLの文章構造が崩れやすい
clearfix	親要素	HTMLの文章構造を崩さない	指定方法がやや複雑
overflow: hidden;	親要素	指定方法が簡単 HTMLの文章構造を崩さない	親要素からはみ出した子要素が非表示になってしまう。

メリットとデメリットを押さえて、それぞれの方法を使用してみましょう。

まとめ

この記事では横並びのレイアウトを作成するためのCSSプロパティ「float」の使い方について解説しました。値に方向を示す単語を指定して、配置する位置を調整できます。もう一度floatプロパティに使用する値と指定内容を確認してみましょう。

値	指定内容
left	横並びにした要素を左へ寄せる
right	横並びにした要素を右へ寄せる
none	（初期値）横並びの配置を指定しない

floatを使用すれば、非常にシンプルなコードで横並びを実現できます。しかし問題点として、後に続く要素が、floatを指定した要素の下にを回り込んでしまう点が挙げられます。記事後半では要素の回り込みを解消する方法としてfloatの解除方法について解説していますので、参考のうえ使いこなしてみましょう。

プログラミング学習でこのような経験はありませんか？