html5でfloatの回り込み解除の質問。


今まで<br clear="both">などと書いていたのですが
html5でclearは<br>の属性には使えないとのこと。

そこでcssを使い<br class>と書こうとしましたが
<br>はそもそも改行目的で正しくないらしい。

<div class></div>とするのも中身が空なので違和感があります。
どう書くのがお勧めでしょうか?

*ページのテンプレートなど汎用性を持たせるため単独が望ましい。<p>などの次文章に(class)はつけたくありません。

よろしくお願いします。

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2015/01/12 01:01:17
  • 終了:2015/01/19 01:05:03

ベストアンサー

id:gizmo5 No.3

gizmo5回答回数484ベストアンサー獲得回数1382015/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: ".";
}
他2件のコメントを見る
id:gizmo5

画像や記事を配置するときに、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 タグのように、開始・終了タグがあって中身がないタグの構造は他にもあります。

2015/01/14 16:42:11
id:tontonpokopoko

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

2015/01/15 06:08:39

その他の回答(2件)

id:yotaca No.1

よたか回答回数426ベストアンサー獲得回数462015/01/12 05:59:06

ポイント34pt

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

id:tontonpokopoko

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

2015/01/14 10:43:19
id:pogpi No.2

pogpi回答回数368ベストアンサー獲得回数492015/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}
とかで、どうですか。

id:tontonpokopoko

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

2015/01/14 10:43:55
id:gizmo5 No.3

gizmo5回答回数484ベストアンサー獲得回数1382015/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: ".";
}
他2件のコメントを見る
id:gizmo5

画像や記事を配置するときに、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 タグのように、開始・終了タグがあって中身がないタグの構造は他にもあります。

2015/01/14 16:42:11
id:tontonpokopoko

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

2015/01/15 06:08:39

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

  • 今どきのclearfix 今どきのclearfix ほとんど変わってなかった。IE系9以下切り捨てて以下のように .clearfix:after { content: &quot;&quot;; clear: both; display: block; } というか、これからはflex boxでしょ。float
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません