marginの相殺ではないのに、margin-topが効かない

質問

marginの相殺ではないのに、margin-topが効かない
状態です。

<h2 class="a">見出しa</h2>
<div><!--外枠-->ここにclearfix
　　　<div><img></div>ここでfloat:left
<div><img></div>ここでflaot:left
<div><img></div>
</div>

<h2 class="b">見出しb</h2><!--この<h2>のmargin-topが効かない-->ここでclear:both;
　　　<div><img></div>
<div><img></div>
<div><img></div>
</div>

なぜmarginの相殺ではないのに2個目の<h2>でmargin-topが効かないのでしょうか？

教えてください・
よろしくお願い申し上げます。

回答No.1

x_lady007

同じ状況を作ってみましたが、2つ目の＜h2＞のmargin-topは効いています。
もしかしたらclearfixがおかしいのかもしれませんね。
http://special.kei-yonekubo.com/100915-2/

ここで使用しているclearfixは以下です

.clearfix:after{
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.clearfix{zoom:1;}

が、以下の方が短くてオススメです(clearfixではないですが)。

.clearfix{visibility:hidden;zoom:1;}

floatをしている要素の親要素に指定してくださいね。