- ベストアンサー
clearfixについて
- .clearfix:afterとcontentを使ったclearのやり方自体は分かるのですが、IEのバグ直し用のmin-height: 1px;というところがなぜ必要なのか意味がよく分かりません。
- clearfixの:afterとcontentを使ったclearのやり方はよく知られていますが、min-height: 1px;はIEのバグを修正するために必要です。
- clearfixには.clearfix:afterとcontentを使ったclearの方法がありますが、その後にmin-height: 1px;を指定することで、IEのバグを解消することができます。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- 回り込み解除（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
- clearfixの記述の仕方
サイトでclearfixを使わないと親要素の高さがなくなってしまうのは分かったのですが clearfixをどこにどのように記述したらいいのかが今ひとつ分かりません もし、お分かりの方いましたらご教授下さい。 以下の記述を探したのですがこれをどこかに記述すれば親要素の高さがでるのでしょうか？ /* モダンブラウザ（Firefox Opera Safari）対策 */ .clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; font-size:0; } /* Win版IE7とMac版IE5対策 */ .clearfix{ display:inline-block; } /* Win版IE5および6対策 */ /* Hides from IE-mac \*/ * html .clearfix{ height:1px; } .clearfix{ display:block; } /* End hide from IE-mac */
- 締切済み
- ホームページ作成ソフト
- 【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
- 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> （後略）
- ベストアンサー
- ブラウザ
- 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の存在意義
この間、紹介して頂いた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
- 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
- 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
- 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
- ナビゲーションバーのfloatを解除できない。
以上二つのソース(HTMLと,CSS)を用意しました。 top_naviのfloatを解除して その下に、画像の表示をさせたいのですが、(添付画像、ピンクエリア) top_naviの続きに、【div class="slideshow"】の画像表示エリアが表示されてしまいます。 (添付画像 水色のエリア。) 【<!--<div class="clearboth"></div>--> を使用すれば、思い通りに表示されるのですが、 clearfixの方法で解除したいと思っております。】 また、IE6～9、firefox10～11で動作させたいと思っております。 ご教授お願いします。 ==HTMLソース=== <div id="container"> <div id="top_navi"> <ul> <li>リンク1</li> <li>リンク2</li> <li>リンク3</li> </ul> </div> <!--<div class="clearboth"></div>--> <div id="show" class="slideshow" align="center"> <img src="photos/1.jpg" alt="画像の説明" width="960" height="300" border="0"> </div> </div> ==HTMLソースここまで=== ##CSSソース## *{ padding : 0px ; margin : 0px ; } #container{ width : 960px; border: 3px solid #FF9900; margin : 5px auto; } //navi設定部分ここから #top_navi { height: 1.3em; background-color: #3399FF; } #top_navi ul { padding: 0px; margin: 0px; list-style-type: none; } #top_navi li { float: left; width: 100px; height: 1em; text-align: center; padding: 0px; margin: 0px; } #top_navi li a { color: #0000FF; display: block; } #top_navi li a:hover { color: #FFFFFF; background-color: #000080; height: 1.3em; } //navi設定部分ここまで //naviとslideshowの間をclearfixする。 .clearfix:after { content: "."; /* 新しい要素を作る */ display: block; /* ブロックレベル要素に */ clear: both; height: 0; visibility: hidden; } .clearfix { min-height: 1px; } * html .clearfix { height: 1px; /*¥*//*/ height: auto; overflow: hidden; /**/ } .clearboth{ clear: both; } ##CSSソースここまで(一部抜粋)
- ベストアンサー
- CSS
お礼
ありがとうございます、こんなシンプルなやり方もあるんですね、こちらのやり方でやってみます。