• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

• gizmo52015/01/13 13:51:21

  満足33pt

  こちらが参考になると思います。
  http://kojika17.com/2013/06/clearfix-2013.html

  clearfixとは

  clearfixを最初に考案したのは、オーストラリア人のWebデベロッパー Tony Aslettという方が、2004年5月8日に擬似要素を使用した手法を公表したのが、clearfixのはじまりです。
  
  　。。。
  
  IE6, IE7のブラウザのシェアは、この記事を書いている時点で、それぞれ6.27%と1.9%です。(Net Applications 調べ 2013年5月現在)
  IE7以下のブラウザのシェア率も低くなってきたので、これらのブラウザを除外した形で再考しました。

  .clearfix:after {
    content: "";
    clear: both;
    display: block;
  }
  

  http://kojika17.com/2011/04/float-clearfix.html
  
  
  人力検索でもオリジナルの clearfix と似たような CSS が使われています。
  http://q.hatena.ne.jp/css/newquestion.css?20141201

  .clearfix:after {
    content: "";
    /* new clearfix */
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
   * html .clearfix {
    zoom: 1;
  }
  /* IE6 */
   *:first-child + html .clearfix {
    zoom: 1;
    display: inline-block;
  }
  /* IE7 */
  .clearfix {
    display: block;
    *zoom: 1;
  }
  .clearfix:after {
    display: block;
    visibility: hidden;
    font-size: 0;
    height: 0;
    clear: both;
    content: ".";
  }
  

  スター

  • 

    4件のコメントを見る

  • tontonpokopoko 2015/01/14 10:46:54

    回答をありがとうございます。
    参考のURL、拝見させていただきました。
    既存のレイアウトには:afterという要素を使ってみようかと検討中です。
    上の方にもコメントしましたが不定期で挿入する画像に対応する方法はご存じでしょうか？

    スター

  • tontonpokopoko 2015/01/14 10:49:14

    imgにafterを使ったらその時点で回り込み解除されてしまいますよね？
    画像を右か左に眺めながらその記事終了時に解除したいのですが。

    スター

  • gizmo5 2015/01/14 16:42:11

    画像や記事を配置するときに、clearfix をクラスで指定したブロックで囲んでおくのです。
    その中に記載した画像に float を指定しても、しなくてもとりあえず囲みます。
    HTML では文章の構造を記載する、という考え方に基づいています。
    
    もしくは回り込みを解除する記事を clearfix にしておきます。
    float を指定してるということは、その後に clear の指定がない記事が必ずあるはずなので。

    <img src="..." style="float: left;">
    <div class="clearfix">
    回り込ませたい記事
    </div>
    回り込ませたくない記事
    

    
    

    <gr clear="both"> のイメージを捨てたくないのであれば、div のような block 要素に clear のスタイルを指定して中身は空にしておくのが良いでしょう。
    name 属性を指定した a タグや、src 属性を指定した script タグのように、開始・終了タグがあって中身がないタグの構造は他にもあります。

    スター

  • tontonpokopoko 2015/01/15 06:08:39

    貴重なご意見をありがとうございます。参考にさせてもらい自分に合った方法を考えたいと思います。

    スター

その他の回答

• よたか2015/01/12 05:59:06

  満足34pt

  私の場合は、コンテンツの入っているエリアに、下記の回り込み解除のクラスを指定しております。
  　
  １）CSS側記述
  .clearbox{zoom:100%;}
  .clearbox:after{content:'.'; clear:both; height:0; display:block; visibility:hidden;}
  　
  ※ :afterで . を追加し回り込みを解除してから、最小のブロック要素に指定して表示を消します。ちなみにzoom:100%は古いブラウザ対策なので無くても支障はないかもしれません。
  　
  ２）html側記述
  <div class='clearbox'>
  本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
  </div>
  　
  これでdiv内の回り込みが解除されます。なにか疑問点があれば引き続き質問してください。

  スター

  • 

    1件のコメントを見る

  • tontonpokopoko 2015/01/14 10:43:19

    回答をありがとうございます。:afterという擬似要素を使ったことがないので参考になりました。不規則に挿入する画像の回り込み解除にはこの方法は使えませんよね？

    スター

POGPI2015/01/12 11:53:21

満足33pt

＜DIV class="hoge"＞
＜DIV class="hoge"＞＜p＞タイトル＜/p＞＜/DIV＞
本文
＜/DIV＞
cssで、
DIV.hoge{float:left;width:300px;padding:0px;margin:0px}
とかで、どうですか。

スター

• 

  1件のコメントを見る

• tontonpokopoko 2015/01/14 10:43:55

  回答をありがとうございます。

  スター
• その他の回答を読む

この質問へのコメント

質問の情報

登録日時

2015-01-12 01:01:17

終了日時

2015-01-19 01:05:03

回答条件

1人1回まで

この質問のカテゴリ

• ウェブ制作

この質問に含まれるキーワード

人気の質問

• 二重整形って最小何歳でできるんですか匿名質問者1112日前
• さんたって親なんですか匿名質問者1日前
• おかず交換をしたいのですが、下記、いずれかでも良いので教えてください。 1. おかず交換会をしている場所…o9bot1113日前
• 日本の医療費の総額を知りたい。 家計と健保と自治体の助成金の3種で、医療機関の収入は成り立っていると思…匿名質問者1313日前
• 思春期で親がうざいときどうすればいいですか。匿名質問者112日前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ