floatを使って画像にテキストを回り込ませて解除する時 clear:both;やclear:left;などを使うけど、テキストの量が少ないと上手く解除されない。

例えば......

この状態から回り込みを単純に解除するには空のdivタグやbrタグにclear: both;プロパティを与えれば良いんだけど、くくってるdivタグにmargin-bottomなどのプロパティが与えられてるとき、テキストの終わりの部分からしかmarginが計算されないので正確なmarginが適応されない。しかもpでくくったりした場合はブロック要素が入れられないから回り込みを解除できない。

色々探してなんとか方法を見つけたので覚えがきとして書いておこう。

CSSソース

.clearfix { border: 1px solid #333; margin: 10px 10px 30px; }
.clearfix p { margin: 5px; }
img { float: left; margin: 0 5px 5px 0: vertical-align: bottom; }
.clearfix :after {
          content: ".";
          display: block;
          height: 0;
          clear: both;
          visibility: hidden;
} 
.clearfix  { display: inline-table; }
/* back-slash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* back-slash hack end */

IE6をのぞくモダンブラウザは大抵擬似クラスafter属性をサポートしてるので、divの最後にブロックレベル要素のコンテンツを作り、floatをクリアさせて、visibillty: hidden;で見えなくしてる。

IE6はafter属性をサポートしてないので、スターハック(*の後に半角スペースを入れ忘れないように！)を使ってWin IEに適用、Mac IEを排除するためにバックスラッシュハックを使ってる。

かなり複雑な記述になるけど、結構使えるテクニックだなと思った。