今まで<br clear="both">などと書いていたのですが
html5でclearは<br>の属性には使えないとのこと。
そこでcssを使い<br class>と書こうとしましたが
<br>はそもそも改行目的で正しくないらしい。
<div class></div>とするのも中身が空なので違和感があります。
どう書くのがお勧めでしょうか？
＊ページのテンプレートなど汎用性を持たせるため単独が望ましい。<p>などの次文章に（class）はつけたくありません。
よろしくお願いします。
No.3
504
141
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: "."; }
No.1
42746
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内の回り込みが解除されます。なにか疑問点があれば引き続き質問してください。
回答をありがとうございます。:afterという擬似要素を使ったことがないので参考になりました。不規則に挿入する画像の回り込み解除にはこの方法は使えませんよね？
No.2
42859
33pt
＜DIV class="hoge"＞
＜DIV class="hoge"＞＜p＞タイトル＜/p＞＜/DIV＞
本文
＜/DIV＞
cssで、
DIV.hoge{float:left;width:300px;padding:0px;margin:0px}
とかで、どうですか。
回答をありがとうございます。
No.3
504141
ここでベストアンサー
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: "."; }
画像や記事を配置するときに、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 タグのように、開始・終了タグがあって中身がないタグの構造は他にもあります。
貴重なご意見をありがとうございます。参考にさせてもらい自分に合った方法を考えたいと思います。
41
38
2
画像や記事を配置するときに、clearfix をクラスで指定したブロックで囲んでおくのです。
その中に記載した画像に float を指定しても、しなくてもとりあえず囲みます。
HTML では文章の構造を記載する、という考え方に基づいています。
もしくは回り込みを解除する記事を clearfix にしておきます。
float を指定してるということは、その後に clear の指定がない記事が必ずあるはずなので。
<gr clear="both"> のイメージを捨てたくないのであれば、div のような block 要素に clear のスタイルを指定して中身は空にしておくのが良いでしょう。
2015/01/14 16:42:11name 属性を指定した a タグや、src 属性を指定した script タグのように、開始・終了タグがあって中身がないタグの構造は他にもあります。
貴重なご意見をありがとうございます。参考にさせてもらい自分に合った方法を考えたいと思います。
2015/01/15 06:08:39