floatを使って画像にテキストを回り込ませて解除する時

質問

floatを使って画像にテキストを回り込ませて解除する時 clear:both;などを使うけど、テキストの量が少ないと上手く解除されないですよね。そのとき、下記のようなCSSを書くのですが、これだとMacのIEではうまいこと解除できていません。
どう書いたら良いでしょうか？

【HTML】
<div class="box">
<img>
<p>テキスト</p>
</div>

【CSS】
div.box {
zoom: 100%;
background-color: #CCC;
padding: 10px;
width: 500px;
}
div.box:after {
content: " ";
clear: both;
height: 0;
display: block;
visibility: hidden;
}
div img {
float: left;
}

回答No.5

神崎 渉瑠（@taloo）

すみません、<del>補足</del>出しゃばり。

<img>がその次の<p>テキスト</p>の段落に関係する物であれば、
<p><img>テキスト</p>としてもいいと思います。
そうすれば<img style="float:left">だけでデザインも出来ると思います。

ですがどの段落にも属さない、挿絵のような物なら、
img {display:block} がベターかな、と思います。

お礼

色々とありがとうございます！

回答No.4

神崎 渉瑠（@taloo）

デザインを目的としたHTMLタグを追加するのは、文書構造が崩れるため本来は不適切なのですが、
clearする方法がそれしかなかった、ということでANo.1の方法が採られていましたが、
今では文書構造を崩さずにclearする方法が見つかっています。

翻訳サイトですが、元のサイトはこのページに書かれていますので、たどってください。
http://www.kuroduction.com/doc/translation/position_is_everything/easyclearing.html
ただし、状況によってはこの方法を使えません。

３段組の場合はそのまま
[float:left] [float:left] [float:none]
とすることで３段に出来ます。

<p class="f_left"><img></p>
div p.f_left{
float: left;
}
とするか、
div img{
display:block;
float:left;
}
とすればいいんじゃないでしょうか。

が、このパターンなら、
<div>
<p><img style="float:left;">テキスト</p>
</div>
でいいと思いますが。。。

参考URL：

http://www.kuroduction.com/doc/translation/position_is_everything/easyclearing.html

お礼

ありがとうございます！
直りました！！

回答No.3

quads

そういえば、img 要素はテキストと同じ親要素内ではないのですね。
#2の回答はちょっと違ったかもしれません。

お礼

色々と調べていただきありがとうございます。

回答No.2

quads

MacIE に対する挙動は実際に確認して扱った経験がないので、有効な方法があるかもしれません。

この状況で私が対応するとしたら…

float を指定している要素が inline-block である img 要素なので、親要素は inline を内容にできます。
display: block が指定されていたとしても問題ありませんが。
親要素が inline を含めるのであれば、br 要素を含んでしまっても妥当性に変化はありません。

ということで、

<div class="box">
<img>
<p>テキスト<br style="display:block; clear:both"></p>
</div>

これでもよい気がします。

ブロックレベルでの clear に関しては、#1は一般的には不適ですが、
インラインブロックに関しては、末に br で解除しても問題ないかと。
ただし、CSS2では clear プロパティはブロックレベルの要素にしか適用できないので br に display: block を指定します。

あくまで MacIE に対応するためですが、これをした場合、:after 疑似要素は不要になります。

回答No.1

dezimac

【HTML】
<img>
<p>テキスト</p>
<div class="clear"><br></div>

【CSS】
.clear{
clear: both;
}
.clear br{
display: none;
}

のようにクリアようのダミーを用意すればいいです。

お礼

ありがとうございます。

BRタグを増やさずに、先ほどのHTMLでCSSだけを書き換える方法はありますか？