- 締切済み
clearfixの記述の仕方
DrFellの回答
- DrFell
- ベストアンサー率55% (305/551)
clearfixの使い方は、html側の親要素に「class="clearfix"」を加えるだけです。 clearfixは、あまり推奨できません。 それよりもｃｓｓのclearfixを親要素のクラス名（id名）に変えるだけで同じ効果があります。それなら、デザインの為に新たなクラス名を付加しなくてもいいです。 #1/#2さんはフロート嫌いのようですが、フロートによる段組も適材適所で問題ありません。絶対配置も万能ではありませんし、好みや状況に応じて使われることをお勧めします。 ｃｓｓはhtmlと対応して表現されますので、ｃｓｓだけ出されても適切なアドバイスはできないことが多いです。今回はよく使われるパターンとしての回答です。多分間違っていないとは思いますが、より詳しく聞きたい場合は親要素子要素などといってないで、問題が再現できるhtml+cssを見せていただくと、的確なアドバイスが受けられると思います。
関連するQ&A
- 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; /**/ } clearfixの:afterとcontentを使ったclearのやり方自体は分かるのですが、IEのバグ直し用の .clearfix { min-height: 1px; } というところがなぜmin-height: 1px;なのか意味がよく分かりません。
- ベストアンサー
- HTML
- Firefoxでfloat設定したら背景が表示されない
Firefoxで親ボックス（maincontent）に背景のbgを設定して、 float設定でレフトメニュー（menu）メイン（mainarea）を入れ たのですが、親ボックスで指定した背景画像が表示されません。 おそらく親ボックスからはみ出た設定になっていると思うのですが 本を見て、「clearfix」を追加したのですが、ダメでした。 .clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix{ display:inline-block;} /*Hides from IE-mac\*/ *html.clearfix{height:1%} .clearfix{display:block;} /*End hide from IE-mac*/ 「clearfix」を入れる場所もおかしいのかも知れないです。 お分かりになる方教えていただけますか？
- 締切済み
- CSS
- CSS Validatorでエラーの出ないclearfixハックとは
W3CのCSS ValidatorでCSSをチェックしていますが、 フロートをクリアするための記述に問題があり、 正当なCSSと判断されません。 Validatorでエラーの出ないclearfixハックをご存知の方、 アドバイスをお願い致します。 関係あるかわかりませんが、一応書いておくと htmlの記述は「XHTML 1.0 Strict」で行っております。 以下、エラーが出ているclearfixの記述です。 /*------Floatのclearfix*/ #header:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; } #header{ display:inline-block; } /*clearfix Win版IE7・Mac版IE5対策*/ *html #header{ height:1%; } #header{ display:block; } Validatorが問題としている箇所は、下記の部分です。 *html #header{ height:1%; } 現在、悩みすぎて泥沼状態です。 どうも他の対策を思いつく余裕がなくなってきました。 申し訳ありませんが、皆様のお力をお借りしたく、 投稿させて頂きました。 なお、clear:both;の場合、完全にクリアされないことが あり、あまり使いたくない状況です。 何か良い対策方法があれば、アドバイスをお願い致します。
- ベストアンサー
- HTML
- 回り込み解除（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のサイトのやり方のほうが短く、シンプルですよね？？ 考え方が違うからなのでしょうか？ 分かる方、ご教授お願いします＞＜
- ベストアンサー
- HTML
- Firefoxでbackground-repeatが表示されない
contentボックスの中に sideとmainを配置した後 contentの背景にy軸にリピートして メニュー用の画像を表示させようとしたのですが 画像が表示されずうまくいきません。 検索してclearfixで回避できるような感じのものを見つけたので とりあえず追加してみたのですが駄目でした。 うまく表示させる方法を教えてください。 #content { width: 800px; border: #333333; margin: auto; background-image: url(img/aaa.jpg); background-repeat: repeat-y; } #side { float:left; width: 200px; margin-right: 10px; } #main { float:left; width: 570px; padding-right: 0px; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */
- ベストアンサー
- CSS
- 【CSS】clearとvisibilityについて
【CSS】clearとvisibilityについて こんにちわ。いつもみなさまのご助言に大変感謝しております。 標記の件ですが、CSSの勉強をしていましたところ、いかのようなコードがあり、気になりました。 .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } この場合、クラス"clearfix"で括られているエリアの末端には「.」が入りますが、visibilityプロパティにより非表示とされることで文字通り画面上にはピリオドが 存在しない形式になっていますが、そもそもなんでこんなcontentプロパティやvisiblity プロパティを使っているのでしょうか。 .clearfix:after { display: block; height: 0; clear: both; } これだけだと何か不都合が生じるのでしょうか。
- ベストアンサー
- HTML
- clearfix の後marginが効かない
はじめました。web制作初心者です。 ご教授お願い致します。 グローバルナビゲーションを<li>で作り、それをfloatして横並びにし、マウスオーバーするように指定しました。その後、最初はclear:bothを指定していたのですが、ネットで「clearfix」の方が良いとのことでしたので初めて使いました。 すると次の<div>以降のmargin-topが効きません！！ 今のブラウザはIEです。 <div id="wrapper"> <div id="navi"> <ul> <li class="menu"><a href="" title="お品書き" class="active">お品書き</a></li> <li class="drink"><a href="" title="ドリンク">ドリンク</a></li> </ul> </div> </div> <!-- ++++++++++++++++++++ E N D navi SECTION ++++++++++++++++++++ --> <!-- ++++++++++++++++++++ BEGIN contentss SECTION ++++++++++++++++++++ --> <div id="contents" class="clearfix"> <div id="left"> <div id="kodawari"> <img src="image/top_bar_coment.jpg" alt="###" width="635" height="40" /> </div> </div> </div> </div> #wrapper { width: 900px; } #navi ul, #navi ul li{ float: left; } /* afterに対応したブラウザ向け */ #contents .clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } /* IE6 */ * htm .clearfix { height: 1%; } /* IE7 */*:first-child+html .clearfix { height: 1%; } #contents { width: 900px; padding-top: 5px; padding-right: 13px; padding-left: 12px; } #contents #left { width: 660px; margin-top: 15px; ←これが効かない } ごめんなさい。このCSSでわかりますでしょうか？ よろしくお願い申し上げます。
- ベストアンサー
- CSS
- IE8で印刷時に背景が出ない（Floatを内包する要素）
IE8で印刷時に背景が出ない（Floatを内包する要素） 以下の内容のページを印刷の際、IE8で#wrapの内容が複数ページにまたがるときだけ#wrapの背景画像がうまく表示されません（最終ページのみ背景が出ます）。 firefox、IE6、IE7では問題なく印刷されます。 clearfixの仕方に問題があるのかと削除して試しても結果は同じでした。 他に原因が思い当たらず困ってるのですが、アドバイスをいただけないでしょうか？ ※css #wrap { width: 850px; background-image: url(../_images/common/wrap_bg.gif); background-repeat: repeat-y; margin-right: auto; margin-left: auto; margin-top: 0px; } #main_contents { width: 600px; float: right; } #side { width: 250px; float: left; } .clearfix:after { content: " "; display: block; visibility: hidden; clear: both; height: 0.1px; font-size: 0.1em; line-height: 0; } .clearfix { display: inline-table; min-height: 1%; } @media print{ .clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:visible; } } ※HTML （前略） <div id="wrap" class="clearfix"> <div id="main_contents">～</div> <div id="side">～</div> </div> （後略）
- ベストアンサー
- ブラウザ
- IE7でclearfixが効かない？
winXP環境、xhtml+cssでwebページを作成していますが、壁にぶち当たっています。 親ボックスの中に２つの子ボックスをfloatでレイアウト、というよくあるパターンですが、親ボックスにclearfixを指定しているのにIE7で表示すると、floatさせたdivが親ボックスからはみ出した状態で表示されます。 Firefox3/IE6/IE8で表示確認すると問題なく表示されます。 ■htmlソース http://bangn.web.fc2.com/testpage.html ■CSSソース http://bangn.web.fc2.com/css/default.css（デフォルトスタイルリセット用） http://bangn.web.fc2.com/css/base.css（divレイアウト、clearfix） http://bangn.web.fc2.com/css/kakunin.css（レイアウト確認用に各divのborderを黒くしたもの） htmlの書き方がおかしいのか？clearfixの記述がおかしいのか？とソースを何度も見直ししましたが、解決に至らず困っております。 どなたかアドバイスをいただけないでしょうか？ よろしくお願いいたします。
- ベストアンサー
- CSS
- 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 に置き換えるべきか悩んでいます。
- ベストアンサー
- CSS