サイトコーディング！float解除でよく使う方法

公開日：2020/07/04

#css #HP #HTML #コーディング

サイトコーディング！float解除でよく使う方法

サイトのコーディングでfloatをよく使うことがあると思います。

今ではfloatの代わりにflexboxを使ってコーディングすることもありますが、ブラウザなどの種類に関してflexboxでは上手くキレイにコーディングすることができないこともあります。

そういった時は、floatでコンテンツを横並びにしたりしてレイアウトを整えたりします。

ですが、floatは初めて使う人にはややこしく、floatしたくないコンテンツまで影響がでたりもします。そうならないためにも解除をしないといけないのです。

今回は、私がよく使うfloat解除方法をご紹介します。

clear: both; でfloat解除
clearfixでfloatを解除
overflow:hidden;でfloatを解除
この記事のまとめ

clear: both; でfloat解除

一般的なのがclear: both; で解除する方法です。下記のソースを参考に解除してみて下さい。

<div class="box">
  <p class="img"><img src="./img/sample.jpg" alt="左に寄せたい"></p>
  <p class="text01">右に寄せたい</p>
  <p class="text02">ここでfloat解除します</p>
</div>

<p class="text01">右に寄せたい</p>

<p class="text02">ここでfloat解除します</p>

</div>

.box {
  width: 100%;
}
.img {
  width: 49%;
  float: left;
}
.text01 {
  width: 49%;
  float: right;
}
.text02 {
  clear: both;
}

.box {

width: 100%;

}

.img {

width: 49%;

float: left;

}

.text01 {

width: 49%;

float: right;

}

.text02 {

clear: both;

}

上記の様にimg（クラス名）を左に寄せてtext01（クラス名）を右に寄せて2カラムをfloatで作るとします。その後にくるコンテンツtext02（クラス名）にclear: both;を付けることで上の段にあるimgとtext01のfloatを解除することができます。

デメリット

必ずfloatを解除するコンテンツが必要
子要素がすべてfloat指定している場合はclear: both;をすると回り込みが行われない
clear: both;をしたコンテンツにはmargin-topとmargin-bottomが効かなくなる

clearfixでfloatを解除

私はこの方法を使って解除することが多いです。learfix（クリアフィックス）は親要素に対して指定するcssのテクニックになります。

親要素にある子要素の最後に疑似的にコンテンツを作りだしてclear: both;で解除する方法です。メリットはhtmlに無駄なコードを書くことなくクラス名を親要素に付けてあげるだけで解除が可能です。

<div class="box clearfix">
  <p class="img"><img src="./img/sample.jpg" alt="左に寄せたい"></p>
  <p class="text01">右に寄せたい</p>
</div>

<p class="text01">右に寄せたい</p>

</div>

.box {
  width: 100%;
}
.img {
  width: 49%;
  float: left;
}
.text01 {
  width: 49%;
  float: right;
}

/*----- float解除 -----*/
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  display: inline-table;
}
/* Hides from IE-mac \*/
* html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;
}

.box {

width: 100%;

}

.img {

width: 49%;

float: left;

}

.text01 {

width: 49%;

float: right;

}

/*----- float解除 -----*/

.clearfix:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

.clearfix {

display: inline-table;

}

/* Hides from IE-mac \*/

* html .clearfix {

height: 1%;

}

.clearfix {

display: block;

}

上記のようにclearfix（クラス名）を親要素に付けるだけで子要素のfloatを解除することができます。cssの13行目以降をコピペしておくだけで、あとはクラス名を親要素に付けるだけになります。

また、clearfixには様々記述方法がありますので、自分に合った記述を使うようにしてください。

デメリット

cssの記述方法がサイトによって多少違う
親要素にクラス名を余分につけることになる

overflow:hidden;でfloatを解除

子要素が全てfloatで指定している時は、親要素にoverflow:hidden;を指定することでfloatを解除できます。

<div class="box">
  <p class="img"><img src="./img/sample.jpg" alt="左に寄せたい"></p>
  <p class="text01">右に寄せたい</p>
</div>

<p class="text01">右に寄せたい</p>

</div>

.box {
  width: 100%;
  overflow: hidden;
}
.img {
  width: 49%;
  float: left;
}
.text01 {
  width: 49%;
  float: right;
}

.box {

width: 100%;

overflow: hidden;

}

.img {

width: 49%;

float: left;

}

.text01 {

width: 49%;

float: right;

}

記述量に関しては、この方法が一番少なくキレイにコードを見ることができます。ですが、元々overflow:hidden;という指定はfloatを解除するためにあるものではありません。はみ出した要素をどう扱うかという時に指定するものになります。

この方法を私が使う時は、サイト移転をしてきたときに無駄な記述を出来る限り増やさない時などに使用します。あまり正しい使い方ではないということを理解しておいたほうがいいと思います。

デメリット

floatしている親要素には必ず記述する必要がある
高さ（height）を指定している場合ははみ出したコンテンツは非表示される
そもそもfloat解除用に作られたものではない

この記事のまとめ

floatでコンテンツを横並びにしたりするレイアウトは今でもよく使われます。ですが、解除方法を知らないと思うようにサイトを構築することもできません。

floatにはいろいろな解除方法がありますが、その中でも私がよく使う3パターンをご紹介しました。

使う目的や方法をしっかりと把握した上で記述するようにしましょう。

ちなみに私のオススメはclearfixです。覚えておいて損はないというか、これ１つでfloatを解除することができます。