CSS：floatの解除方法３つ（＋１つ）

Tweet

Pocket

こんにちは！

前回、floatの使い方について記事を書きました。
主に回り込みの機能とご説明したかと思います。

前回の記事はこちら：CSS：floatの使い方について

でも、そのままにしているとfloatは回り込み続けてしまうし、
浮きっぱなしになってしまうので、後続の要素が上に詰まってきたりしてしまうんですよね。

なので、floatは解除して上げる必要があります。

今回は、そのfloatの解除についてご説明していきます！

• 方法１：clearfixを使用する
• 方法２：clear:bothを使用する
• 方法３：overflow:hiddenを使用する
• （方法４：heightを指定する）

方法１：clearfixを使用する

これは擬似要素afterに記述する書かれ方が多いです。

cssに

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

というスタイルを記述しておき、
子要素がfloatしている親要素に　クラス「clearfix」をつけてあげます。
そうすることで、親要素が終わる部分にafter要素としてclear:both;が入り、回り込みが解除されるという構成です。

最近はこの方法が取られていることが多い印象です。

方法２：overflow:hiddenを使用する

疑似要素ってちょっとこわい…という時代にはこちらの記述を使用しがちでした。
floatしている子要素の親要素に高さを認識させてあげる方法として、親要素にoverflow: hidden;を書くという方法があります。

ただ、overflow: hidden;は、「はみ出た要素を非表示にする」という機能も兼ね備えているプロパティなので、デザインによっては使えない箇所も出てきてしまいます。
そんなときにはやはり方法1のclearfixを使ってあげるといいでしょう。

方法3：clear:bothを使用する

cssやfloatを練習し始めた人はまずここから！というプロパティがこちら。
floatを使って見て上手くいかなかったらとりあえずまずはこれを試してみてほしいです。

使い方は簡単で、回り込みをやめたいボックス（例：<div class=”mawarikomiowari”>）のスタイルに

.mawarikomiowari{
  clear: both;
}

と書いてあげるだけ。

こう書くと、ここで回り込みが解除されることになります。

ただ、コーディング初心者さんはこのために空divを置きがちなのですが、基本的には空divは推奨されないので、
方法1の手段で疑似要素としてクリアしてあげると良いのではないでしょうか。

※注意※

方法1,2と方法3の役割は、厳密には違います。

方法3（clear: both）は、記述した要素に、回り込みをさせないように指示する記法です。回り込みをやめさせたい要素自体にスタイルをつけます。
方法1,2 （clearfix, overflow:hidden）は、回り込みをそのボックス内で完結させ、後続の要素に回り込みをさせないようにする記法です。floatしている要素の直親要素にスタイルをつけます。

どちらも、「floatを終わらせる」という意味では同じなのですが、それぞれ使う場面が違うので、
正しく見極めていけるといいですね！！

（方法４：heightを指定する）

強硬手段ではありますが、floatしている要素に強制的に高さを書くことで、無理やりそこに「存在している」と認識させることもできます。
ただこれはあまりおすすめできません。

おすすめできない理由としては、要素が可変のサイズ（たとえば新着情報の本文が表示される、とか）の場合、heightを決め打ちにしていると、
文章量によってレイアウトが崩れてしまうためです。
高さが可変ではない、グローバルメニューの画像などでは利用できるかもしれないですが、そこだけ高さ指定するのであればここも方法1でいいのでは…と（以下略

比較表

分かりにくいので便利さの比較表を作ってみました。

まとめ

clearfixすごい

Tweet

Pocket

この記事に似た記事

photoshopで爆速スライスする CSS：widthの計算をめっちゃ楽にしてくれるプロパティ photoshopから書き出したsvgがchromeで表示できなかったよ CSS：縦中央揃えにする方法まとめ