回り込み解除（clearfixとの違いは！？）

質問

http://www.u-ziq.com/blog/2007/01/css_1.html

こちらのサイトに書かれている回りこみ解除のやり方は、
clearfixとは異なるのでしょうか？？

clearfixについて調べると、
以下のように記述するようですが

.clearfix:after {
content: "."; /* 新しい要素を作る */
display: block; /* ブロックレベル要素に */
clear: both;
height: 0;
visibility: hidden;
}

.clearfix {
min-height: 1px;
}

* html .clearfix {
height: 1px;
/*\*//*/
height: auto;
overflow: hidden;
/**/
}

http://www.u-ziq.com/blog/2007/01/css_1.htmlのサイトのやり方のほうが短く、シンプルですよね？？
考え方が違うからなのでしょうか？

分かる方、ご教授お願いします＞＜

回答No.2

metametamu · ベストアンサー

リンク先の中のzoomというのがIE5.5以降の独自拡張なので、チェックをかけると正しくない文法になります。
つまりリンク先のclearfixはIE5.5以降とモダンブラウザ対応でエラーの出るのテクニックです。

質問者さんの書かれているcssの記述はmin-heightがIE7用、height1pxがIE6以下用、height:auto;とoverflow:hidden;がmacIE用に指定されています。
ソース中の

/*\*//*/

/**/

の部分がコメントアウトとして、スターハックも今のところ正しい文法として評価されているのでこの書き方だとエラーになりません。(建前上ですが)
この書き方ならIE5.0にも対応できるのはメリットです。
IE5以降とモダンブラウザ対応でエラーの出ないテクニックです。

また、独自拡張を使ってもいいのであればこんな書き方もできます。

.clerafix {
height:1%;
line-height:normal;
overflow:hidden;
overflow:-moz-scrollbars-none; /* Netscape 6.2~7.1 and IE5~6 */
}

ですが、１さんも言われていますが普段は使わない方がいいと思います。
デザインによってはHTMLに無駄な要素を追加しないので重宝しますが、ハックに精通してないとどこまで対応しているのかわからないので逆に修正に時間がかかったりします。

お礼

分かりやすいご回答ありがとうございます。
使わずに組み立てられるよう頑張りたいと思います！
ありがとうございました☆

回答No.1

ORUKA1951

まったく同じこと書いてあるけど？？？
clearfixって単なるclass名だよ。
ふつうは、そもそもこんなことしなくても、ちゃんとしたHTMLで、詳細度が理解できていれば、こんなややこしいことしなくてもすむ。
　たぶん、出所は一緒だろうね。

　そもそも、セレクタにclass名しか使わないから、こんなおかしな複雑なCSSを書かなきゃならなくなる。
・HTMLがきちんとかかれてない
　---class名にclearfixなんて、デザインのためだけと明白な名称をつける時点で
　　　技量なしだな？
・セレクタには、全称/要素/クラス/一意/擬似/属性/・・と使える手段はたくさんある。
　馬鹿の一つ覚えみたいにclassだけしかない時点で？

・回りこみ解除はclear:
・HTMLはきちんとマークアップしましょう。(文書構造にしたがって)
・セレクタには詳細度が決められています。それを使えばむやみにclass名はつけなくてすむ
・clearbothと、それと併用することがあるdisplay:hiddenには、ブラウザによって多少処理が異なるので、それでも差しさわりのないように文書を作りましょう。そんな細かいことに労力を使うのは無駄、膨大な数のブラウザに対応させるのは無理

お礼

もっと簡単に可能なのですね！
正しくシンプルに書けるよう勉強してみます。
素早い回答、ありがとうございます☆