小粋空間  -  a cheap joke and a play on words site

CSS の after 擬似要素で回り込みを解除する

float プロパティで設定したテキスト等の回り込みを、CSS の after 擬似要素を用いて解除する方法を紹介します（通常の解除方法も併せて掲載しています）。

１．「回り込み」とは

例えば、画像の左（または右）にテキストを表示することを「（テキストの）回り込み」と呼びます。

マークアップ

<p>
<img src="hogehoge.jpg" alt="image" style="float:left" />
回り込みテキスト～（略）～回り込みテキスト
</p>

表示

回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト

（X）HTMLでこのような表示を行う場合、先に出現する要素（ここでは img 要素）に対して float プロパティを与えます。float プロパティは、指定された要素を左または右に寄せて配置する際に使用します。 後に続く内容は、前の要素の右（または左）側に回り込みます。

ちなみに「float プロパティ = 回り込み」という解釈は正しくないようです。下記の記事に分かりやすい解説があります。

• てんぽ：floatは「回り込み」ではない

２．「回り込み解除」とは

画像の左（または右）に回り込んで表示されているテキスト（あるいは要素）を、回り込まない状態に戻すことをこのように呼びます。
画像の回り込みが有効な状態が持続すると、流し込むテキスト量によっては後続のテキスト等が一緒に回り込んでしまいます。リキッドレイアウトでブラウザの横幅をひろげた場合にありがちです。

回り込みを解除していないマークアップ

<p>
<img src="hogehoge.jpg" alt="image" style="float:left" />
回り込みテキスト～（略）～回り込みテキスト
</p>
<p>
回り込まないテキスト～（略）～回り込まないテキスト
</p>

表示

回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト

回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト

このような予期しない表示を避けるため、回り込みを解除する必要があります。

３．回り込み解除方法

３．１ 後続の要素に clear プロパティを与える

回り込みを解除するために、回り込みさせた要素の後続の要素に clear プロパティを与える方法があります。

マークアップ

<p>
<img src="hogehoge.jpg" alt="image" style="float:left" />
回り込みテキスト～（略）～回り込みテキスト
</p>
<p style="clear: both">
回り込まないテキスト～（略）～回り込まないテキスト
</p>

表示

回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト

回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト

３．２ 親ブロック要素の after 擬似要素に clear プロパティを与える

具体的には、float プロパティの要素を含む親ブロック要素の after 擬似要素に対し、clear プロパティを与えます。

３．１項の方法では後続の要素で回り込み解除を設定しますが、回り込みさせた要素を含むブロック要素自身で回り込みを解除させる方が感覚的に本来のように感じます。
このような場合、after 擬似要素を用いれば可能らしいのですが、残念ながら IE6（多分IE7も）では after 擬似要素がサポートされていません。

が、調べているうちに、

「zoom プロパティを併用することで IE も対応可能」

といった内容の記事をみつけましたので、ここではその方法をご紹介致します。*1
参考記事は下記です。ありがとうございました。

• AOINA.COM：[css]floatの回り込み解除を親要素で処理
• u-ziq.com：CSS 回り込み解除の決定版

全体の構成は下記のようになり、float プロパティを与えた親のブロック要素（ここでは p 要素）に対し、回り込み解除用の class 属性を記述します。class 属性名は任意の名称で構いません。

CSS

.fbox {
    zoom: 100%;
}
.fbox:after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}

Windows XP + IE6 / IE7/ Firefox2 / Opera 9 では、height プロパティ、visibility プロパティは指定しなくても回り込み自体は解除されるようです（他の振る舞いについての差異は未確認）。

マークアップ

<p class="fbox">
<img src="hogehoge.jpg" alt="image" style="float:left" />
回り込みテキスト～（略）～回り込みテキスト
</p>
<p>
回り込まないテキスト～（略）～回り込まないテキスト
</p>

表示

回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト

回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト

４．Movable Type でエントリーを書く場合

Movable Type でエントリーを記述する際、エントリー編集画面下の「改行設定」を「改行を変換する」にしている場合でも、class 属性つきの p 要素を手動で付与した場合は、p 要素は重複して自動付与されないので、３．２項の方法がそのまま利用できます。

５．関連リンク

• Cascading Style Sheets, level 2 CSS2 Specification：9.5.1 浮動体の位置決め ('float'特性)
• 同：9.5.2 浮動体に隣接する流れの制御 ('clear'特性)
• 同：5.12.3 :before 疑似要素及び :after 擬似要素

とまとめてみましたが、私自身回り込み解除を利用していなかったので、これから少しずつ過去のエントリーを修正していきたいと思います（反省）。

---

*1：zoom プロパティは IE（5.5 以上）の独自プロパティなので、利用した場合、CSS valid にならなくなります。

2013.03.12
本文の誤記を修正しました。