海に浮かぶ男性

WEB

float 解除と clearfix

要素を float させた場合、次の現象が起こります。

  • 次の要素を正しく配置できない(表示が崩れる)
  • 親要素の高さを認識しない(背景色や背景画像が表示されない)

これらを解除するためにはどうしたら良いのでしょうか?

float 解除するには?

float を解除するには、以下の3つの方法があります。

  1. 次に配置したい要素に clear プロパティを指定
  2. 親要素に overflow プロパティを指定
  3. 親要素の class に、clearfix を使用

では、それぞれの方法について詳しくみていきましょう。

1. 次に配置したい要素に clear プロパティを指定

次に配置したい要素に、clear: both; を指定する。

デメリット
  • 上方向の margin が効かなくなる
  • 親要素に背景色や画像を配置したい場合、高さが認識されないため配置することができない

2. 親要素に overflow プロパティを指定

親要素に、overflow: hidden; を指定する。

デメリット
  • Firefox などの古いブラウザでは、印刷した時に float した部分が消えてしまうことがある
  • position や z-index プロパティと組み合わせると、hidden の『はみ出た部分は表示させない』という仕様により、うまく表示されない場合がある

3. 親要素の class に、clearfix を使用

clearfix とは、clear プロパティを使わずに float を解除する方法である。

① CSS に以下の記述をする。( IE8 以降に有効)

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

 

② 親要素に class="clearfix" を追加するだけで、float 解除ができる。

まとめ

float を解除したい場合、以下の方法があることを紹介しました。

  • clear: both;
  • overflow: hidden;
  • clearfix

 

どの方法を選択するかについては、内容により臨機応変に使い分けるのが良いでしょう。

 

 
スポンサードリンク
 
スポンサードリンク

404Broken Link Checker でリンクエラーになってしまう?その対処法について前のページ

要素の高さを揃える 『matchHeight.js』の使い方次のページ郵便受け

関連記事

  1. 腕を交差させる草原に座った男性

    WEB

    データベース内の文字列の書き換えに便利な『Search Replace DB』の使い方

    データベース内の文字列の書き換えに便利な『Search Replace…

  2. シャットダウン

    WEB

    XSERVER(エックスサーバー)で設定したドメインを削除する方法

    せっかく取得したドメインですが「もう使わないから削除したい!」そう思っ…

  3. 子猫をのせた乳母車を押す親猫

    WEB

    とっても簡単!!WordPress(ワードプレス)の子テーマの作り方

    ずっと面倒だと思っていた WordPress(ワードプレス)の子テーマ…

  4. 郵便受け

    WEB

    要素の高さを揃える 『matchHeight.js』の使い方

    float させた横並びのカラムの高さをそろえたい!! だけど、ボック…

  5. パソコンを前に困っている女性

    WEB

    WordPress簡単移行ができずに手動で移行作業を行う方法

    私は普段からレンタルサーバーはエックスサーバーを利用しているのですが、…

  6. 洗濯物

    WEB

    横並びさせた要素の端のマージンを調整する方法

    幅が 960px の inner の中に、幅が 300px、右側のマー…

== WORDPRESS 完全マニュアル ==

wordpress

よく読まれている記事

  1. 3匹のカエル
  2. ガッツポーズする男性
  3. ガネーシャ
  4. mistake
  5. 腕を交差させる草原に座った男性
  6. ドアに差し込まれた封筒
  7. 段ボールを持つ女性
  8. Google Search Console
  9. 404
  10. ペンを持つ手

当サイトで使用しているテーマはこちら!!

Gutenberg 完全対応のテーマならコレ!!

Adobeを買うのならどこよりも安い?!

WordPressでブログ始めてみませんか?

パソコンを覗き込む二人の女子
  1. 洗濯物

    WEB

    横並びさせた要素の端のマージンを調整する方法
  2. Google Search Console

    WEB

    【2019年】『Google Search Console』でプロパティの追加と…
  3. カメラ

    WEB

    WordPressで最低限おさえておきたい画像処理について
  4. コントローラー

    WEB

    WordPress でレイアウトが崩れる自動整形を回避する方法
  5. シャットダウン

    WEB

    XSERVER(エックスサーバー)で設定したドメインを削除する方法
PAGE TOP