[CSS] HTML5BoilerplateのCSSで.clearfixが便利 - YoheiM .NET
こんにちは、@yoheiMuneです。 マークアップしている人には当たり前かもしれませんが、HTML5 Boilerplateで公開されているCSSの中身で、「.clearfix」クラスが便利だったので、 ご紹介させて頂きたいと思います。 HTML5 Boilerplateとは HTML5 Boilerplateとは、 フロントエンドの技術（HTML、CSS、JSや、一部Apacheの設定も）について、 ベストプラクティス（Goodノウハウ）を集めたサイトです。 HTML5 Boillerplateでは、index.html, 404ページ、CSSの基礎内容、JSの書き方など勉強になる事が多く公開されています。 今回は、その中でmain.cssの中身で、「.clearfix」クラスがスゴく便利と感じたので、それを紹介したいと思います。 clearfixクラスとは .clearfixクラスは
![[CSS] HTML5BoilerplateのCSSで.clearfixが便利 - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/a2064deec2876737b37775312b9616f8b0eb9fbe/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F152.png)
float解除の決定版。clearfixを考えたら、進化した。
現在この中でclearfixでよく使用されているプロパティは display:inline-block; height:1%(min-height:1%) zoom:1; でも良く考えたら、全て微妙です。 zoom:1はIEの独自仕様ですし、heightを使用する場合は、IE6,7に対応させるために2つのプロパティが必要です。 display:inline-blockもボックスの要素を変形させることになります。 hasLayoutのスイッチを見た時に、一番理に適ったプロパティはwidthかなと思いました。 子要素を囲む要素として、divやulなどデフォルトCSSがdisplay:blockのプロパティのものが多く、display:blockのプロパティの場合、width:100%で問題ないと思ったからです。 現在のブラウザ状況に適したclearfix 上記を踏まえ見直したclearfixが
clearfixでfloatを解除 | d-spica
clearfixでfloatを解除 2007-03-07 1 0 XHTML/CSS clear, CSS 枠や背景が消えたり，途中で切れたりしたことはありませんか。 floatした要素（ボックス）を含む親要素（ボックス）のborderやbackgroundが途中で切れてしまうことがあります。 左の例では，右側のメニューが終わったあたりで，左右にあるラインも切れています。 floatした要素の高さは親要素の高さに反映されない 分かりやすいようにXHTMLとCSSの例を書いてみましょう。 <div id="wrapper"> <div id="content"> <p>content</p> </div> <div id="menu"> <p>menu</p> </div> </div> #wrapper { width: 200px; border: solid 3px #999999;
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
