-
ID:Nww4h1 さんの質問

float解除みなさんどうしてます?私はclearfixに乗り換えました。
^
以前は、<br style="clear:both" />でやっていたのですが、
大手企業がclearfixをつかってるのをみて移行しました。
ですが、調べてみるとclearfixにもいろいろなバージョンがあるようです。
br派のひとがどれだけ多いのかも兼ねて、みなさんのclearfixのしかた等拝見できればなと思います。
^
ちなみに私はこれです:

.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 */

みんなの回答 9 件

ID:/nDTGR さんの回答

<br style="clear:both" />を使うのはHTMLの文法的に間違っているからやめたほうがいい

clearfixをそのまま使うのはclass="clearfix"とか書くことになり、クラス名に見栄えを記述してはいけないというHTMLの原則に反するのでやはりよくない

Sassか何かで他のクラスにclearfixを埋め込むのが正解

ID:L8TIDy

クラス名に見栄えを記述しちゃいけないなんてルールありましたっけ?
出来れば参照できる仕様のリンク貼ってもらえませんか?

ID:/nDTGR

ttp://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#classes
より引用
"There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content."

必ず従うべきルールではないが、HTMLとCSSが分離しているそもそもの理由にかかわる話なので、これを守らないのはちょっと程度が低いと感じる

ID:7NE2aN

個人的に自分の思想を正解とか言っちゃうのがもう恥ずかしくてみてらんないw

ID:PRlUxm

Sassを使うのは賛成だが、更新性を考えるとsassを使えない人の事も考慮する必要があるで何が正解かは一概には言えないと思う。

ID:L8TIDy

参照リンクありがとうございます。
ただ、no additional restrictions 、encouragedと書いてるのに原則と言っちゃうのは誤訳ですよ。

個人的にセマンティックにこだわるなら、RDFとかmicrodata使えばいいと思うので、わざわざファイルサイズ肥大化させてまで、小細工する必要ないと思いますね。
例えば<h1 class="heading">みたいなHTMLってhタグがわざわざ略されてるのに元に戻してるだけになりますし。

ID:9VfSsy さんの回答

overflow:hidden;
でいいじゃん

ID:Gk2ZYx

これな

ID:tSx2Yg

俺もこれ。タグでclearする事はほぼない。

ID:MKDFJE

子要素の位置を親から出したいとき以外はこれ。

ID:zrwHSi

これ

ID:6VIew9

上に同じく。

ID:rqDJWS

firefoxの印刷で問題が起きるで

ID:LhG9Za

overflow: hidden は後から邪魔になったりするから好きじゃない

ID:x8Qnrx

イイねとかシェア用の吹き出しが切れちゃう。

ID:g9ROEU

これは印刷で不具合起きたり、古いブラウザでhasLayout関連のバグ起きたりするから使わない。

ID:P7sZmS さんの回答

最近はclearfix も対応ブラウザが減って短くなったから、親divのスタイルに毎回書くようになった。clearfix っていっぱい入っているの微妙だし。

ID:kxI932 さんの回答

position: relative;
overflow: hidden;

大抵の事はこれで片付く。

ID:L8TIDy さんの回答

display:tableとかでもいける

ID:/bVt.4 さんの回答

li{float:left;}
ul:after{content:""; display:block; clear:both;}

でやってんだけどおかしいですか?

ID:x8Qnrx

afterってIE7ダメですよね。といってももう対応する必要ないか

ID:/bVt.4

そうですね、そもそもIE9以前一切対応してないです。
対応しなくていいならこれcssで完結できるからすげえ楽っすよ
hiddenだとはみ出させたい要素中にあると面倒じゃないっすか。

ID:QPdUZ/ さんの回答

ということで、clearfixを使うこと自体がもう古いという結論に。乗り換えたタイミングでトピ主残念。古いというか、新しくないね。

ID:aG5R3y

みんな旧IEとかどうしてんだろ・・・無視?

ID:ZCqEWF

overflow: hiddenで十分じゃん。今どきIE6とか旧ですらないでしょ。

ID:7CIWxE

hasLayoutの問題はIE7まででしたか・・・
zoom:1;付けておけばいいのですね。これは勉強になった・・・

ID:PRlUxm

Overflow:hiddenやdisplay:tableにもデメリットはある
Clearfixも使えるに越したことはない

ID:AJ/eLC

え?古いの?
まさに今日clearfixだらけの作ったんだけど…。

ID:g9ROEU さんの回答

5年くらい前からずっとmicro clearfix使ってるわ。記述短いし簡単だから優秀。
ちなにみsassでもcompass使えばデフォでmicro clearfix使える記述がある。

.clearfix:before,
.clearfix:after {
content:"";
display:table;
}

.clearfix:after {
clear:both;
}

.clearfix {
zoom:1;
}

ちなみにoverflow: hidden;使わない理由はこれね↓
これは印刷で不具合起きたり、古いブラウザでhasLayout関連のバグ起きたりするから使わない。

ID:Xlg0.8 さんの回答

何年前の話だ

最終更新日:2014-08-13 (6,846 views)

関連するトピックス

ページ上部に戻る