人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

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

よろしくお願いします。

●質問者: tontonpokopoko
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● よたか
●34ポイント

私の場合は、コンテンツの入っているエリアに、下記の回り込み解除のクラスを指定しております。

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内の回り込みが解除されます。なにか疑問点があれば引き続き質問してください。


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

2 ● POGPI
●33ポイント

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


tontonpokopokoさんのコメント
回答をありがとうございます。

3 ● gizmo5
●33ポイント ベストアンサー

こちらが参考になると思います。
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: ".";
}

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

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

gizmo5さんのコメント
画像や記事を配置するときに、clearfix をクラスで指定したブロックで囲んでおくのです。 その中に記載した画像に float を指定しても、しなくてもとりあえず囲みます。 HTML では文章の構造を記載する、という考え方に基づいています。 もしくは回り込みを解除する記事を clearfix にしておきます。 float を指定してるということは、その後に clear の指定がない記事が必ずあるはずなので。 >|| <img src="..." style="float: left;"> <div class="clearfix"> 回り込ませたい記事 </div> 回り込ませたくない記事 ||< &lt;gr clear="both"&gt; のイメージを捨てたくないのであれば、div のような block 要素に clear のスタイルを指定して中身は空にしておくのが良いでしょう。 name 属性を指定した a タグや、src 属性を指定した script タグのように、開始・終了タグがあって中身がないタグの構造は他にもあります。

tontonpokopokoさんのコメント
貴重なご意見をありがとうございます。参考にさせてもらい自分に合った方法を考えたいと思います。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ