clearfix + Dreamweaver CS3 デザインビューのレイアウト崩れを防ぐ方法

clearfix を使っているページを Dreamweaver CS3 のデザインビューで見てみると表示がおかしくなり、編集がしにくいんですよね。このレイアウト崩れを正常に戻す方法をメモしておきます。

↑ こんな感じで、どこを選択して編集すれば良いのかわかりにくい。

この記事の目次非表示

[ overflow: hidden; ] を指定する方法

clearfix セレクタの中に [ overflow: hidden; ] か [ overflow: auto; ] を指定すれば良いんだそうです。

↑ float は解除されたが、float を内包する div の背景画像と背景色は表示されない。

※ [ overflow: auto; ] を指定した時 Safari での表示がおかしかったので、私は [ overflow: hidden; ] を使う事にします。

ありがとうございます。

下記の指定を、float を内包する div に直接記述すると背景画像・背景色が表示できます。

<br style="clear:both;" />

↑ float が解除され、float を内包する div の背景色が表示された。

ありがとうございます。

現場からは以上です。それでは、またッ！！！

だるかぶ

最後までお読みいただきありがとうございます！スキ・コメント・シェア・フォローなどで応援いただけると『だるかぶ』のやる気がアップします！

記事内容の修正について 記載している内容は記事執筆時の情報です。できるだけ最新情報を掲載するようにしていますが、情報が間違っている場合は「コメント」でご指摘いただけるとありがたいです。