[エオカ]

floatさせた要素を含む親要素（divなど）の高さが認識されない現象について。

float要素の回り込みが確実に解除されていないためにFox、safari、operaなどで起こる症状で
解決策として

1.HTML側でfloat要素（フロートが終わるボックス）の直後に<br clear="all" />を入れる

2.IE未対応の「content」プロパティを利用したCSS側での制御（ハックになるのか･･･？）

があり、自分は2の方法をよく使っております。
（要は毎回<br clear="all" />より楽なので）


2のCSSでの制御について。
オリジナルソースが書かれたのがいつ頃かは分かりませんが、和訳サイトがこちら
（直訳っぽくて、ちびっと分かりづらいですが･･･汗）


▼構造のマークアップなしでフロートをクリアする方法
http://www.kuroduction.com/doc/translation/position_is_everything/easyclearing.html


▼紹介されてるソース---------------------------------------------------------------------------

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

---------------------------------------------------------------------------------------------

フロートをかけたリストタグ（ulにclass指定）にも使えたりと、結構重宝してたんですが
IE7には対応してないらしく、一部修正が必要とのこと。

8行目の
.clearfix {display: inline-table;}　→　.clearfix {display: inline-block;}
（table→blok）に変更するだけで、解決するようです。


contentプロパティで内容を追加させ、それがフロートをクリアする仕組みになっているらしく
上記をサポートしてるfox、safariなどのモダンブラウザには有効との事。
とはいえ、IE7では依然としてcontentプロパティと関連セレクタをサポートしてないらしく、このままでは無効。
win・mac版のIE対策部分を一部変更する事で、かろうじてIE7にも対応できるらしいです。
（その他、IE7のCSSチェック対策もちょこちょこ載ってましたので、また時間がある時に掲載します。）
【 ㈱毎日コミュニケーションズ　“WebDesigning”　7月号掲載記事より 】

去年の8月から出てた情報でしたが、IE7で全く無効になるとは思わず、全然対策取ってませんでした･･･反省。
微妙な方法なのか、情報が遅い雑誌なんかはいまだ“inline-table”のままで記載してますし･･･苦笑


勝手な高さ解釈を修正するなら、ついでにcontent対応してください。

[Hiro-C]

IE7ではスターハック（* html）が無視されてしまうようです。
min-heightは高さの最小値を設定するプロパティですが、
これを .clearfix に加えることで幸せになれるかもしれません。

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: inline-table;
    min-height: 1%;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

[田原＠フォーラム管理人]

貴重な書き込み有難うございます。
恥ずかしながら「clearfix」ハックと呼ばれるものを初めて知りました。
参考サイトは見ましたが、今一つ充分に理解は出来ていません。
「clearfix」ハックを使用するメリットが今一つ分からないのです。
個人的には、例えばfooter部分のCSSに直接、 clear: both;を入れれば良いのでは？
と思ってしまうのですが、それでは問題があるのでしょうか？

.footer {
    clear: both;
　　その他の装飾;
}

フロートをかけたリストタグ（ulにclass指定）に使うと便利、
というのが具体的にどういうケースを示すのか分からないので余裕があれば、またご意見を頂ければ嬉しいです。

後、Hiro-Cさんの意見の補足として
参考になるページがありましたのでURLを貼り付けておきます。

【石輪っぷり! floatさせたボックスが親ボックスからはみ出すのを回避する裏技のIE7対策】
http://www.will3in.jp/blog/ishiwa/archives/2006/09/26-0049.php

ネットを調べていて、ハックを別CSSファイルに纏めておけば今後の修正が簡単になると意見を見ました。
ケースバイケースかもしれませんが、御尤もな意見だなと思ったのでこちらもリンクしておきます。
http://ordb.tk/?p=29

[エオカ]

ありがとうございます

.clearfix {
    display: inline-table;
    min-height: 1%;
}

display: inline-table;　のままでも、１行加えるだけでよかったんですね！

ちなみにinline-table; 、inline-block　と、どういった違いになるんでしょうか･･･
（初歩的な質問ですいません･･･こちらでも再度検索してみます）
またご都合のよい時にでも教えていただければ幸いですm(_ _)m


---------------------------------------------------------------------------------------------


ulに直接class指定するのは、リストタグに背景指定でナビを作るときによく使ってます
簡単な作り込みなら起こらないのですが、ややこしく入れ子になった時に
IE6で開いた直後、ナビボタン上にマウスを持っていくと、ﾋﾟｺｯとナビの下に空白ができるような動作が起こります
（空白は縮まらずそのまんま・・・）

例→http://www.penny-rtea.com/web1/

div要素でナビの親ボックスを作成し、その中にulを入れこんでます
（バグ再現用なので、ソース自体がおかしいです･･･すいません；；）

多分、clearfixの和訳サイトにのってるギロチンバグなる物だと思うんですが
どういう時になるとか何が原因かは、はっきりつかめてません
今回の例は、どうやらナビの親ボックスにpadding-topをかけたせいのようです
ul、親ボックス、どちらにclear:bothを指定しても、ﾋﾟｺｯの動作は起きてますね

ulの閉じタグ後に<br clear="all" />かclear:both;を指定した空divを持っていけばいい話ですが
空要素をどうしてもはさみたくない･･･というわがままから、この策を取っています･･･orz



リストタグ以外でも、ややこしいレイアウトを再現するのに入れこ式にしなければいけない場合など
余分な要素が増えてしまう時は、（floatさせた要素の）親要素をid指定しclearfixをclassで指定して
１つのボックスでfloatを解除するようにしています
親要素にclass指定しか出来ない場合は、その中に余分なボックスを配置しなきゃならないので
結局は空要素を置くのと同じになっちゃう事もありますが･･･



---------------------------------------------------------------------------------------------



こちらで管理できるサイトであれば、気づいた時にすぐ修正という事もできますが
外に納品する案件は、新ブラウザが出るたびに「修正します！」では厳しいかもしれませんね･･･涙
手元で管理できない物は、空要素や改行タグでしのいだ方が安全なのかなぁ･･･

バージョンアップのたびに、IEｻﾝには振り回され続けそうです

本来はそういった面も考慮してデザインしなきゃですよね･･･難しい･･･(ﾟ-ﾟ;)

[田原＠フォーラム管理人]

いつも現場ならではの生きた意見を有難うございます。
勉強中の管理人としては、とてもよい刺激になります。
エオカさんの例に出して頂いている内容については、
何かハックを使わない良い方法がありそうな気がするので少し宿題にさせて下さい。

「clearfix」ハックについて、自分なりにどういうCSSの指示なのか整理してみました。
間違い等あれば教えて下さい

【Firefox, Opera, Safari　対応】--擬似要素:after がIEに対応していない為、IEを除く
.clearfix:after {
　　content: ".";　　　　　擬似要素に"."を追加。要素の後に"."が追加される
    display: block;　　　　上記"."の表示形式をブロック要素に指定する
    height: 0;　　　　　　 上記"."の高さが算出されないよう0に設定
    clear: both;　　　　　 フロートを解除して回りこみを防ぐ
    visibility: hidden;　　不可視状態に設定
}

【MacIE　対応 + WinIE7.0対応】
.clearfix {
    display: inline-table;　　表示形式をinline-tableの指定で、MacIEでも外側のボックスの高さを内容にあわせて拡張可に
    min-height: 1%;　　　　　 要素に高さを設定するとWinIEはフロートした要素に合わせて伸縮（IE7.0対応）
}

【WinIE5.0-6.0　対応】--バックスラッシュハックと、スターハックを用いてWinIE5.0～6.0のみ有効
/* Hides from IE-mac \*/　　　　　　　　バックスラッシュハック（MacIE未対応）でMacIE除く
* html .clearfix {height: 1%;}　　　スターハック（WinIE-6.0迄対応）。要素に高さを設定しボックスの高さを拡張する（IE独自のバグ）
.clearfix {display: block;}　　　　 inline-tableのままも気持ち悪いので、MacIE以外のブラウザで表示形式をブロック要素に修正
/* End hide from IE-mac */


但し、このハックには問題点がある事が調べで分かりました。
【参考サイト】
http://www.fsiki.com/archive/css-doc/float.html
（※大変詳しいです、お勧め）

どのような問題点かと言うと、上記サイトより…

display: inline-tableをCSSに記述するとFirefoxのJavaScriptコンソールが以下のようなエラーを吐き出します。
エラー: 'display' プロパティの値をパース中にエラーが発生しました。 このスタイル宣言は無視されました。
無視されているのなら問題ないのですが、非常に気持ち悪いです。
またJavaScriptでobject.style.displayの値を切り替えたりするときに、
ブラウザ振り分けなどの面倒な事態が発生することが予想されます。

また、確かではありませんがMacIEにおいてdisplay: inline-tableが
効いているボックスの子要素を絶対配置(position: absolute)で配置しようとしても、
意図とは反した場所に表示されてしまう現象を何度か経験したことがあります。
(手元にMacが無いのでどういった場合に起きるか確認できていません)

との事でして、その問題点については同サイトで最終提案してくれていますので省きます。

.clearfix {
    color: #000000;
    background-color: #B4D543;
    border: 2px solid #F1288B;
    padding-top: 20px;
    padding-bottom: 20px;
    overflow: hidden;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}

/* Hides from IE-mac \*/
* html #.clearfix {
    height: 1em;
    overflow: visible;
}
/* End hide from IE-mac */

何処まで拘るかにもよりますが、ここまでして（ブラウザバージョンアップの都度検証して）
このハックを使わなければならないのか？という気になってきました（T T）
面倒臭がりの私は、どうも性格柄ハック非推奨です。なんか、非効率な気がしてなりません。
ただ、不明な点があれば調査をするのは技術者の仕事だと思っているし、
それが将来的に応用の効く技術になるのなら、時間を惜しむ必要は無いと考えています。

能力として評価対象にはならないと思いますので、自己満足と研究の為と割り切って
業務の状況を考えながら時間を割きたいですね。


補足ながら、「inline-block」と「inline-table」について説明を入れておきます。
ただ、今回の「inline-table」はMacIEがボックスを拡張する為だけに使用しているみたいです。

displayプロパティ は、要素が生成するボックスをどのように表示させるか、その表示形式を指定します。
要素はそれぞれブロック要素とインライン要素の 2種類に大別されますが、
displayプロパティで各要素に任意で別の種類を割り当てることができます。

inline-block   
「幅・高さを指定できるインライン要素にする（WinIE6.0・7.0, Opera 対応）」
"inline-block" を指定した要素は、インライン要素でありながらブロック要素のように
幅（width）や高さ（height）の指定が可能になります。
インライン要素で幅・高さを指定できるということで、機能的には img要素と同じです。

inline-table
「インラインの表要素にする（table要素）（Firefox, Opera, Safari 対応）」
"table" 関連のキーワードは、HTML文書で使うような場面はありません。
たとえば、XML で記述された文書を XSLT で HTML として表示させる場合の
表組としての整形を行うために使用されることがあります。
HTML文書であれば、わざわざ CSS で面倒な事をしなくとも通常通り HTML の
表関連要素を使って表を作成することができます。

【引用サイト】
http://www.seo-equation.com/html/css/display

色々勉強になったハックでした。
個人で勉強していると、どうしてもブラウザにより異表示は適当に流してしまいます。
また、将来的に発生するであろう修正も、個人では対応可能な為に（自分がする事だから文句も出ないしね）
「仕事」として適切な記述は何だろうかと今後の課題になりました。

[田原＠フォーラム管理人]

その後もしつこく調べた結果、
この方法が一番短くて分かり易いかも。
IE5.5～7までの独自拡張、「zoom」を使用した例です。
独自拡張プロパティですが、CSSを正しく読み込めばモダンブラウザの方を適応するだろうから
今後の変化にも対応が楽そう。

div{
    zoom:1;/*for IE 5.5-7*/
}
div:after{/*for modern browser*/
    content:".";
    display: block;
    height:0px;
    clear:both;
    visibility:hidden;
}

【参考サイト】
http://stopnlisten.no.land.to/2006/11/ie7clearfixclear.html

【zoom　拡大・縮小表示する（IE独自の仕様）】
http://www.htmq.com/style/zoom.shtml

[エオカ]

clearfixについて。

IE7やらFoxのエラーも考えて、一部修正しましたー。

.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
   }

.clearfix{zoom:1;} /* IE5～6 */

/* MacIE5のみ適用 ここから \*//*/
.clearfix{display:inline-block;}
/* MacIE5のみ適用 ここまで */


------------------------------------------------------------------------
.clearfix{display:inline-block(またはinline-table);}
　↓
.clearfix{zoom:1;} /* IE5～6 */
------------------------------------------------------------------------

に変更。
zoom＝IE独自の拡張仕様＝Validatorにはひっかかります･･･ｺﾞﾒﾝﾅｻｲ。


【参考サイト】
■coliss『「clearfix」のIE 7対策：その２』
http://coliss.com/articles/build-websites/operation/css/125.html

■norisfactory『clearfixの決定版を作る －モダンブラウザ編－』
http://norisfactory.com/stylesheetlab/000038.php