overflow:hidden;とclearfix

後続要素が無いためにclear:both;でフロート解除できない場合、フロートしている子要素を包む親要素に対してoverflow:hidden;を設定したり、clearfixを使ったりすると思いますが、双方メリット・デメリットがあるのでまとめておきます。
【overflow:hidden;】
＜メリット＞
・classを追加する必要がないのでHTMLソースコードをシンプルに保てる
・１行で済むので簡単
・DWのデザインビューが崩れない
＜デメリット＞
・IE6で効かないことが多いのでIE6用ハック（zoom:1;）を併用する必要がある。
・FireFoxで印刷バグが発生することがある。
【clearfix】
＜メリット＞
・IE6含め全てのブラウザで有効なので安心
＜デメリット＞
・DWのデザインビューが崩れる
・いちいちclassを追加するのでHTMLソースがclass=”clearfix”だらけになる
上記のように、特にDWを使っている人にとってはどちらも完璧じゃないのが分かると思います。
で、結局自分としては
・メインコンテンツエリアのような大きな領域の場合はclearfix
・細かいパーツのようなものの場合はoverflow:hidden;
というように使い分けすることで落ち着きました。
本当はDW使いなのでoverflow:hidden;でやりたいのですが、Firefoxの印刷バグにやられて酷い目にあったことがあるので、それ以来メインコンテンツエリアのような複数ページにまたがる可能性があるような大きな領域にはoverflow:hidden;は使わなくなりました。
ちなみにその印刷バグというのは「overflowがかかっている領域以降がスコーンと次ページに落ちてしまい、かつ１ページ分の領域を超えた分に関しては一切印刷されなくなる」というものです。
これは、FirefoxでA4１ページに収まらないような長い領域にoverflow:hidden;を使った場合にのみ起きる現象で、今の所overflow:hidden;を使わないようにする以外に修正する方法がみつかりません。
というわけで、ベースのレイアウト部分にはclearfixを使うのですが、そうなると今度はDreamweaverのデザインビュー表示が崩れるという問題が発生します。普段基本的にDWを使うのでこれは正直痛いです。これを直すにはclearfix部分に結局overflow:hidden;を追加してやるしか無い訳で、そうなるともうclearfixを使う意味がないという悪循環・・・（苦笑）
で、Dreamweaverには「デザインタイムスタルイシート」という作業中にのみ有効になるCSSを設定する機能があるときいたので早速使ってみたのですが、実はこれが環境設定で「デザインノート」を有効にしないと使えないんですね。。。「デザインノート」を有効にしていると各フォルダに「_notes」っていう余計なフォルダが出来てしまい、データ納品時にいちいちこれを削除してやらなきゃいけないので、案件によってはかなり面倒、ということでこれもあまり活用出来ず。。。
結局DW環境でやろうとする限り八方丸く収まるうまいやり方ってのは無い、という結論に至りました…orz
制作環境Codaにでも移そうかしら？

Tweet