clearfixの存在意義

質問

この間、紹介して頂いたclearfixについて調べました。
clearfixについては賞賛しているサイトが多く、
良いものであるということは理解できました。

その理由が clear:both を実行するための余分な
タグを書かなくても済むという内容でした。

それならばclearfixを実現するためにCSS内で
かなり冗長なコードにするのに疑問を感じました。
そうまでしてもHTMLは簡潔に書くべきなのかと。

そこでもう少し調べていたら次のサイトに到達しました。
ここでは clear:both でのレイアウトの乱れを指摘しています。

http://webdesignrecipes.com/css-tips-for-beginner-ie7/#s4

最もらしい説明で、やはり clearfix を賞賛しています。
しかし、その後の説明で親要素に overflow：hidden を
あてるのが流行？なのだそうです。

かくいう私どものソースも偶然にも overflow:hidden になってます。
これを clearfix に置き換えるべきか悩んでいます。

回答No.5

Chaire · ベストアンサー

No.4 のお礼より：
> HTML5で段組を浮動化する必要がなくなるということでしょうか？

？ HTML5 でも、構造化文書とスタイルの分離の原則は変わりませんよ。HTML5 の figure は、本で言えばページの上半分に置かれるような「参考図」を示すもの。実際に上半分に図を配置するのは CSS（float）の役割。

> そもそもHTMLの各ブロックがbodyの浮動化要素ではないか

それは違います。CSS のボックスは「通常フロー」に沿って配置されます。垂直方向にブロックボックス、水平方向に行内（インライン）ボックスが、原則として HTML ソースでの出現順に配置されます。この通常フローから切り離されたのが、浮動化ボックスです。

よく「CSS はブラウザごとに振る舞いが違う」などと言われますが（事実、その通りですが）、通常フローが頭に入っていれば、「理想図」はそれなりに予測可能なはずなのです。その「理想図」から外れた部分がブラウザのバグであり、特別に対処しなければならない部分です。ブラウザのバグはそのうち修正されるでしょうから、無理せず無視しても良いぐらいです。

「理想図」とバグの区別のないまま、「このブラウザではこうなる、あのブラウザではああなる」なんていちいちやっていたら、そりゃ日が暮れますよ。

> 段組は根本的に楽になるんでしょうか？

今でも display: inline-block や display: table を使えば十分に楽です。CSS3 にはリキッドマルチカラムのためのプロパティもあります。

では、なぜそれらを皆使わないのか。単純に、IE6 のせいです（シェアで言えば Firefox2 も含むでしょうか）。とはいえ、対応していないなら、それはそれで「見やすい一段組」を提供すれば良い。その延長にあるのが、ごく一部でリキッドマルチカラムと呼ばれている考え方ですが、まだ定着したものではありません。

まあ、float を使った段組みは「仕方なく」使うものだということだけは、頭の片隅に入れておいて下さい。そして、clearfix も。

お礼

ちょっと早起きしてチェックさせてもらってます。
浮動化要素でないとは私の既成概念を壊されましたよ。
そもそも各パーツはレイヤのように考えてましたので、
浮動化のしっかりした定義があるには知りませんでした。

inline-blockはclearfixを探していた時に見つけました。
displya:tableも比較的新しいようですね。
IE6は諦めさせてもIE7は無理でしょうから
おとなしくフロートでの段組を考えることにします。

clearfixは埋もれていくべき技術であることは承知しました。
非常に丁寧に技術的解説をしていただき助かりました。

回答No.6

ORUKA1951

実は、私はclearfixなる技法(このクラス名には、まったく意味が無い)を使いませんし、使ったこともありません。邪道だと認識しています。
　そもそも、HTMLは文書構造にしたがってマークアップするもので、class名についてHTML4.01(199年)の当時から、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。・・・【中略】・・・他のプレゼンテーション的語彙を示すことはない。
　従って著者は、この両要素をスタイルシートやlang属性等と併用することで、HTMLを自身の必要や好みに応じられるようにできる。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より
と明記されていて、clearfixなんて文書構造に無関係な名称をつけること自体に批判的です。

　どうしても必要なら、
<div class="section">
　<h2>見出し</h2>
　<p>段落</p>
　<p>段落</p>
　<div class="figure"></div>
　<p>段落</p>
　<p>段落</p>
<div>
　<hr>
<div class="section">
　<h2>見出し</h2>
　<p>段落</p>
　<p>段落</p>
　<div class="figure"></div>
　<p>段落</p>
　<p>段落</p>
<div>
としておけばよい。スタイルシートでhr{visibility:hidden;clear:both;/* さらに高さなどを小さくする */}
そのほうが、よっぽど良い。

　たぶん、問題になるのはブロックをfloatを使って配置しようとしたときで、その場合もブラウザによる差は気にしないというか、気になら無いデザインにしています。そもそもHTMLは、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

であって、誰にも同じデザインを求めるならPDFなどはるかに優れた仕様がある。

　HTMLの本来の目的や理念を考えるなら、余計な構造に関係しない要素を追加すべきではない。

　HTML5は、HTML4.01のときから、div+構造を示すclass名やidをつけるとされていたのに、まったく守られていないから、具体的に構造を示す要素にしてしまったのでしょう。

　clearfixなる技法が必要だとしたら、その前に見直すべきは、HTMLの構造であり、HTMLそのものへの理解ではないかと。

お礼

ご回答有り難うございます。
やはりプロの世界でも真っ二つなんですね。

ブログとかではルーチン的に使っているようです。
効率上やむを得ない事情があるのでしょうけど。
こちらとしては強い推薦があったので見送る方針でいきます。

構造化は一応得意分野ではありますが、
HTMLは独特だと痛感させられる場面もあります。
HTMLそのもの自体への理解は当分時間がかかりそうです。
まあ、3年くらい関わっていれば見えてくるかも知れません。

回答No.4

Chaire

そもそも、この問題は「浮動化を使って段組する」という特殊な条件でのみ顕在化します。CSS1 の範囲内では、それ以外に方法がなかったからです。

浮動化は、HTML5 で言えば aside や figure のような、本文から切り離しても問題ないような囲み記事を表現するのに用いるものです。「段組するには float」という固定観念こそ、そろそろ改められて良い時期だと思います。

---
::after 疑似要素を用いて clear する方法は、"clearfix" なる名称が広まる前からすでに行われています。例えば以下のスレッドをご覧下さい（長いしあちこちに話が飛ぶので、気合いを入れて読んで下さい）。だいたい今回と同じような議論が繰り返されています。
http://lists.w3.org/Archives/Public/www-style/2002Aug/0078.html

<div class="div1">
<div class="div2">...</div>
<div class="div2">...</div>
</div>

.div1:after {
　content: ".";
　display: block;
　height: 1px;
　clear: left;
　//zoom: 1;
}

これだけでは ::after に対応していない IE6 でうまくいきませんので、IE 用に zoom: 1 なりを与えておきます。これは hasLayout を有効にし clear と似たような効果を狙っているわけですが、詳細は割愛します。

---
上のスレッドの途中で "float-overflow" という、浮動化ボックスを含むボックスの高さを調節するプロパティが提案されています。実際には採用されませんでしたが。

しかし、2006 年になって「overflow を指定されたボックスの高さには、浮動化した子孫ボックスの高さを含む」という項目が CSS 2.1 草案に追加されます。だって、本当はスクロールバーが必要なのに、子孫が浮動化しているせいでスクロールバーが出なくなったら、お互いに困るじゃないですか！

これが実は clear と似た性質を持ちます。たいていの浮動化段組の解除もこれだけで十分ということになります。

.div1 {
　overflow: auto;
　//zoom: 1;
}

2006 年以降に出たブラウザは、これを実装しているものと思います。IE 用の記述に変更はありません。

---
というわけで、これらは時代の要請に応じて現れた技法です。裏を返せば、時代の要請がなくなれば消えても構わないものです（繰り返しますが、そもそも段組に浮動化なんて使わなきゃいい）。

とはいえ、::after を使うのは "clearfix" なるものに限った話でなく、汎用的な技法です。"clearfix" なる名前を付けることで、浮動化解除という領域に特化した話のように誤解されがちですが、そんなことは全然ない。

overflow の振る舞いの変更も、スクロールバーの表示・非表示を制御するのに、その方が自然だろうというものです。決して浮動化段組の制御に限った話ではありません。

「技法の名前」は流行ものですから、忘れて構いません（私は "clearfix" なる名称が嫌いです）。しかし「技法の内容」は汎用的なものですから、その「意義」と一緒に、自分の道具箱に入れておいて下さい。

お礼

clearfixについては海外から伝わったと聞きました。
私が調べたので国内では2005年が一番古かったですから
2002年というと日本でW杯が開催された年ですね。
無理にclearfixに拘る必要もないようですね。

HTML5で段組を浮動化する必要がなくなるということでしょうか？
そもそもHTMLの各ブロックがbodyの浮動化要素ではないかと
思っているので、ちょっと想像ができません。

今まで#headerとか記述していた内容が<header>などの
専属のタグに変更になるだけのような気がしています。
それとも段組は根本的に楽になるんでしょうか？
それで皆が苦労しているから、何かしら考えているとは思いますが。

回答No.3

神崎 渉瑠（@taloo）

初期（オリジナル）のclearfixはMacIEやIE6、Opera9など、古いブラウザまでサポートしています。
そのため、非常に長くなっています。
そういう古いブラウザを考慮する必要がなければ、新しい単純な書き方で十分だと思います。

お礼

ご回答有り難うございます。
一応、IE6という要望が上から来ています。

今、書いてある単純な方も古いブラウザに対応できると
思っているのですが、如何でしょう。
こちらが対応できないと無条件でclearfix採用となります。

回答No.2

ORUKA1951

＞のsectionは本文中のsectionとは別物で宜しいですか？
　いえ、どちらも・・古いブラウザは、div.section>div.sectionを解釈しませんから、必要なら
div.section div.section div.section{clear:none;}
と三階層目ではcleaerをしないとか・・

sectionの中に、見出しはひとつしかない・・HTML5・・
sectionはひとつの見出しを持つ・・・HTML5・・
ふたつの見出しを書く場合はhgroupで囲む・・・HTML5・・・
※4.4.11 Headings and sections ( http://www.w3.org/TR/html5/sections.html#headings-and-sections )

<section>
　<h1>見出しレベル1<h1>
　<section>
　　<h1>見出しレベル２<h1>
　　<section>
　　　<h1>見出しレベル3</h1>
HTML5では、h1～h6の数字ではなく、文書構造上のレベルで階層を解釈しますから・・
Texで言うところの、
\part　部　　　　　　　　　page
　\chapter　章　　　　　　 article
　　\section　節　　　　　 section
　　　\subsection　項　　　section section
　　　　\subsubsection　目 section section section
的に考えてます。
　目ではclearしないけど、それより上の階層ではflroatはclearさせると・・。
　そのとき、長大なHTML(マニュアル的なもの)は、部、章、節、項までは<hr>を入れておけば、テキストブラウザで見てもよくわかる。そして、視覚ブラウザ用には
div.section hr{clear:left;}
div.section div.section div.section hr{clear:none;visivility:hidden;}

　HTML5のドラフト案が公開されたころから、極力HTML5の考え方を取り入れてHTML4.01strictで作るようにしています。

と言う建前ですが、現実には

・自分自身が後から(何年後でも)見直してわかりやすいように
・将来HTML5とCSS3がウェブ標準となるくらい普及したとき、すぐにHTML5で書ける様に
という実利面が大きいですね。

CSSは、そこだけでなく悠長にならない方法はたくさんあります。
継承されるものは可能な限り上位のセレクタで記述する。
同じプロパティ値は複数回、書かない
セレクタはグループ化する。
同じタイプのプロパティは、改行せずまとめておく
など・・わかりやすくなります。だらだらとスクロールしないと、ある要素関連が見渡せないようじゃ困りますからね。

お礼

いつもご丁寧に頭が下がります。
簡素化の件は当然そうあるべきだと思います。

夜も更けてきたので、取り敢えずはお礼まで。

回答No.1

ORUKA1951

流行？??その言葉に幾度惑わされたことか。
HTML4.01(1999,12)以降大事なことは、HTMLは文書構造をスタイルシートでプレゼンテーションをというすみわけです。それなのに、いまだにtransitinalが使われ続けている。
　しかし、HTML5になったら、transitinal的な要素やぞ規制は無くなる。

　特定の要素に、無駄なclearfixのようなクラス名をつけなくても、
<div class="section">
　<h>見出し<h>
　文章
　<div class="figure">
　　<img>
　</div>
</div>
<div class="section">
　<h>見出し<h>
　文章
　<div class="figure">
　　<img>
　</div>
　<div class="section">
　　<h>見出し<h>
　　文章
　</div>
</div>
ときちんと文書構造にしたがってマークアップされていたら、そんなclass名を付けなくったって、
div.section:afrer{
visibility: hidden;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
とでもすればよい。

:afterのような擬似要素に対応していない古いブラウザにも対応させるなら、
<div class="section">
　<h>見出し<h>
　文章
　<div class="figure">
　　<img>
　</div>
　<hr>
</div>
<div class="section">
　<h>見出し<h>
　文章
　<div class="figure">
　　<img>
　</div>
　<hr>
　<div class="section">
　　<h>見出し<h>
　　文章
　</div>
　<hr>
</div>
としておいても文書構造上間違いではない。CSSで
div.section{visibility:hidden;clear:both;}とすれば済む。へんなbrを書くよりよっぽどまし。
　overflow:hidden;は、もし文章が長いと・・

画像の回り込みを停止すると言うことは、文書構造上、画像を含むブロックとは断絶した要素と言うことですから、余計な--スタイルのためだけのclass名をつける---ことをしなくても、スタイルシートで簡潔に対応できる。そのためにHTMLを汚すことは無い。

お礼

早速のご回答どうも有り難うございます。
迷いが微塵も感じられませんね。さすがです。

clearfixのクラスを作るのは古いブラウザ対策に
IEのバグを利用するから必要なようです。

一応、現時点では後者の考え方にいますが、
>div.section{visibility:hidden;clear:both;}
のsectionは本文中のsectionとは別物で宜しいですか？
現時点では clear:both 実行用のdivが末尾に入ってます。