この記事について
| 環境 | css、html |
|---|---|
| 目的 | margin-topが効かないのを直す |
| 結果 | clear:bothのdivを前に置いてfloatを解除し、事なきを得た |
つまずきポイント要約
- margin-topを使ったdivを含む親要素にfloat:leftがあると「マージンの相殺」が起こる
- 本来はclearfixを使うべきらしいが、その場しのぎでclear:bothのdivを挟んだ
事象
margin-topが効かなかった。
原因
どうも「マージンの相殺」が起こっているらしい。
マージンの相殺が起こる原因はいろいろあるが、自分のケースは、margin-topを使った<div>を含む親要素に float: left; が使われていたため。
floatを解除しないとmarginが有効にならないようだ。
対処
解決方法として「clearfix」なるものがあるらしい。
ただ、私には理解できなかったため、とりあえずその場しのぎで次の方法でfloatを解除し、事なきを得た。
有効にならないmargin-topの<div>の前に
<div class="clear">テキスト</div>を記述。
スタイルシートには、
.clear {
clear: both;
}と記述。
ようは普通にfloatを解除しただけ。
いずれclearfixを使わなければいけないだろうが、そのときまでこれでいこう。
