【CSS】float を使ったデザインで型崩れを回避する為の clearfix

About CSS

最近のウェブサイトの左右レイアウトは、徐々に「flexbox」仕様へ移行してきましたが、まだまだ「float」レイアウトのサイトも多いです。

flort でウェブサイトの左右分けレイアウトにした場合は、型崩れを回避するために必ず「clearfix」を親タグに設定しておかなかければなりません。

今回は clearfix をメモします。

flort 回避用の clearfix

以下の clearfix 設定を CSS に記述

HTML には、親タグに class=”clearfix” と使う。

Dreamweaver デザインタイムスタイルシート用の記述

Dreamweaver でデザインタイムスタイルシートを使う場合は、上記の clearfix だけだと DW のバージョンによって型崩れてしまうことがあります。

その場合はデザインタイムスタイルシートに以下のコードを記述すると回避できます。


以上、まだまだ現役 float レイアウトに必須の clearfix のメモでした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です