clear:both;を単体で指定

float:leftなどで回りこみを設定しました。その設定をclear:both;で解除する時に、インライン要素で指定したいです。

例えば、<div style="clear:both;"></div>で単体ですが、ブロックレベル要素です。
インライン要素で指定できますか？<span>ですと、解除できません。


<div style="float:left;">A</div>
<div>B</div>

<div>C</div>

Cを回りこみさせたくないので、BとCの間にclear:both;を指定したいです。
<div style="clear:both;">C</div>ではない方法をお願いします。

No.2 ベストアンサー 回答者： ORUKA1951 回答日時： 2011/05/19 08:40

　floatは、文章中に登場する画像が文章の可読性を妨げるため、画像の周囲に文章を回り込ませたり、複数の文章ブロックをウィンドウ幅に合わせて横並びの個数を変化させるためるために使うものです。

素人さんがCSSを書き始めると、しばしば内容枠の配置に使用したりしていますが・・
　したがってブロック要素以外で回り込み解除はＨＴＭＬが正しければ本来は必要ないはずです。それをしたいということは、ＨＴＭＬ自体が誤っているのではないかと。
　方法はいくつかありますが、そもそもfloatを使わなくても良い、使うべきでない場面ではないかと・・
・デザインのためにマークアップするのではない文書構造にしたがってマークアップする
・正しいＨＴＭＬに対してCSSで、それぞれの媒体に対してスタイルシートでプレゼンテーション方法を決めていく。しばしば、mediaを指定しないスタイルシートも見かけますが、それだと読み上げソフトや点字端末、そして検索エンジンには？？？

　どういう文書構造に対して、どのようにマークアップし、screen媒体に対してどのようなプレゼンテーションをしたいか

No.3 回答者： dscripty 回答日時： 2011/05/19 09:49

HTML と CSS を正しく解釈する一般的なブラウザなら "clear:both;" をインライン要素に指定しても無効だよ。

そもそも、float: も clear: もブロック要素のためのスタイルだし。

「<div style="clear:both;"></div>」だとレイアウトが崩れたりするのだとおもうけれど、とりあえず、影響のありそうなスタイルをすべて 0 にした、こんなのはどうかな？

<div style="clear:both;margin:0;padding:0;border:0;width:0;height:0;line-height:0;font-size:0;"></div>

問題が出ないようなら、少しずつスタイル設定を減らして、どのスタイルが原因なのかみつけると解決がはやいかも。

でも、[ANo.2] さんも指摘しているけれど、適切に構造化された HTML 文書に対して、適切に CSS をつければ、このようなやぼったくて気持ちのわるいことをしなくていいはず。

No.1 回答者： tracer 回答日時： 2011/05/19 07:51

インライン要素にfloat指定したい理由、<div style="clear:both;">C</div>では不都合な理由を添えるべきかと。

多くの場合、「～したい」よりも「なぜそうしたいのか」の方が重要です。