margin-topが効かない件

margin-topが効かなかった。

どうも「マージンの相殺」が起こっているらしい。

マージンの相殺が起こる原因はいろいろあるが、自分のケースは、margin-topを使った<div>を含む親要素に float: left; が使われていたため。

floatを解除しないとmarginが有効にならないようだ。

解決方法として「clearfix」なるものがあるらしい。

ただ、私には理解できなかったため、とりあえずその場しのぎで次の方法でfloatを解除し、事なきを得た。

有効にならないmargin-topの<div>の前に

<div>テキスト</div>

を記述。

スタイルシートには、

 .clear {
 clear: both;
}

と記述。

ようは普通にfloatを解除しただけ。

いずれclearfixを使わなければいけないだろうが、そのときまでこれでいこう。