css floatとclearfix

2011/05/22

下図のようになったのは調べればわかるかもしれないけど原因不明。
この図以外にも「背景が表示されない」「横に並ばない」等々

floatを使ったときの各ブラウザの表示

floatを使う場合は何かとブラウザ間の違いを考慮する必要あり。
※「floatを使わない」という手法もアリ。

clear:both;

floatを使うとセットで「clear:both;」を使うと思うんだけど、何気にブラウザによって違う。
そのときに使うのはブラウザのバグを突いたCSSハックやclearfixっていうモノを使ったりする。
clearfixも「そもそもCSSハックじゃないの?」とか思ったりするけど気にしない。

※CSSハックを使うときはブラウザのバージョンアップのときに気をつけること。

「clearfix」の記述

CSS部

  1. .clearfix{
  2.   zoom:1;/*for IE 5.5-7*/
  3. }
  4. .clearfix:after {
  5.   content:".";
  6.   display:block;
  7.   height:0;
  8.   clear:both;
  9.   visibility:hidden;
  10. }
  11. .clearfix {display:inline-table;}
  12. /* Hides from IE-mac \*/
  13. * html .clearfix {height:1%;}
  14. .clearfix {display:block;}
  15. /* End hide from IE-mac */

HTML部

  1. <div class="clearfix">
  2. <div style="float:left;width:400px;">コンテンツ</div>
  3. <div style="float:right;width:200px;">メニュー</div>
  4. </div>

新着(ニュース関連以外)

2018-07-26
年賀状で「新春」とか書くけど・・・何故なんだろうと8月を目前にした今、疑問に思った。
2018-05-16
PHPで画像のヘッダ情報(?)の「Orientation」を元に画像回転させたい。
2018-03-05
Android Studioをインストール。エミュレータを軽くするトコまで終わらせたかったけど、挫折した。
2018-02-23
プッシュ通知について調べてた時にでてきたServiceWorker。そのServiceWorkerについてのメモ。
2017-12-13
jqueryで取得したDOM要素をオブジェクトじゃなくて、配列で受け取りたい