Home
CSS
floatで失った要素の高さを取り戻す2つの方法

floatで失った要素の高さを取り戻す2つの方法

公開日
2021.09.18
更新日
2022.04.02
floatで失った要素の高さを取り戻す2つの方法

どうも!かけちまるです!

要素を横並びにするCSSプロパティにfloatがあります。
しかし、floatにはクセがあり、floatを指定した要素の親要素に高さ反映されなくなってしまいます。
floatを指定した親要素に高さを反映させる方法はいくつかあるんですが、inline-blockとかFlexboxがあるのでfloatを使う機会があんまりなく、解決方法を忘れてしまいがちです。
なので、floatを指定して失った高さを取り戻す方法をまとめていきます。

この記事では、

  • ・clearfixを使う方法
  • ・親要素にoverflow:auto;を指定する方法

がわかります。

結論:clearfixを使う方法が一番ラク

floatで失った高さを取り戻す方法はいくつかありますが、個人的に一番ラクな方法はclearfixを使う方法です。

clearfixの使い方

使い方としてはfloatを指定した要素の親要素にclearfixというclassをつけるだけです。
そうすると画像のようになります。
回り込んでいたテキスト02の文章がfloat要素の高さがでてテキスト02の文章の回り込みが改善されます。

clearfixを使う方法

以下のコードのようにCSSに.clearfix::after{ 〜 }を記述し、floatを指定した要素の親要素にclearfixというclassをつけます。

HTML
コピー
<div class="wrap01 clearfix"><!-- floatを指定した親要素にclearfixというclassをつける --> <div class="wrap01_box">float要素</div><!-- floatを指定した要素 --> <div class="wrap01_text">テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01</div> </div> <div class="wrap02_text">テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02</div>
CSS
コピー
/* clearfixを記述 */ .clearfix::after{ content: ""; clear: both; display: block; } /* clearfixを記述 */ .wrap01{ margin-left: auto; margin-right: auto; margin-top: 50px; width: 50%; } .wrap01_box{ float: left; background-color: #aaa; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: bold; margin-right: 20px; width: 300px; height: 300px; } .wrap01_text{ font-size: 16px; line-height: 1.5; width: 100%; } .wrap02_text{ font-size: 16px; line-height: 1.5; margin-left: auto; margin-right: auto; margin-top: 30px; width: 50%; }

なんでclearfixがいいの?

個人的には汎用性があってコードもシンプルになって一番ラクなやり方かと思いますが、やはりメリット、デメリットがあるのでclearfixが使いづらく感じることもあると思うのでそんな時は他の方法で試してみてください。

それでclearfixの何がいいかというと、

  • ・他の方法と比べてレイアウトに影響しない
  • ・CSSが散らからない

というところです。

逆に使いにくい点としては、

  • ・疑似要素の::afterを使ってしまう

くらいでしょうか。

親要素にoverflow:auto;を指定する方法

floatを指定した要素の親要素にoverflow:auto;を指定します。
以下が実装例です。

HTML
コピー
<div class="wrap01"> <div class="wrap01_box">float要素</div><!-- floatを指定した要素 --> <div class="wrap01_text">テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01</div> </div> <div class="wrap02_text">テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02</div>
CSS
コピー
.wrap01{ overflow: auto; /* floatを指定した親要素に記述 */ margin-left: auto; margin-right: auto; margin-top: 50px; width: 50%; } .wrap01_box{ float: left; background-color: #aaa; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: bold; margin-right: 20px; width: 300px; height: 300px; } .wrap01_text{ font-size: 16px; line-height: 1.5; width: 100%; } .wrap02_text{ font-size: 16px; line-height: 1.5; margin-left: auto; margin-right: auto; margin-top: 30px; width: 50%; }

overflow:auto;を使うメリット・デメリット

overflow:auto;を使う方法のいいところはというと、

  • ・CSSを追加するだけで実装できる

というところです。

使いにくい点としては、

  • ・他の人がコードを見たときになんのための記述かわかりにくい
  • ・レイアウトによっては使いにくい場面がある

というところです。

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

WP REST APIを使用してWordPress記事を外部サイトで表示する方法

WP REST APIを使用してWordPress記事を外部サイトで表示する方法

jQueryでheaderとfooterを共通化する【load()メソッド】

jQueryでheaderとfooterを共通化する【load()メソッド】

Three.jsテクスチャをGLSLでbacground-size: cover;のようにする

Three.jsテクスチャをGLSLでbacground-size: cover;のようにする

Amazonみたいな商品の拡大プレビュー機能を実装

Amazonみたいな商品の拡大プレビュー機能を実装

【Adminer】Local by Flywheelでデータベースを操作しよう

【Adminer】Local by Flywheelでデータベースを操作しよう

Contact Form 7の基本設定

Contact Form 7の基本設定