css - 要素をフロート要素に近づけるように移動することはできません

Question

なぜ#navbarそれ以上上にシフトできないのですか？試しmargin-topましたが、うまくいきませんでした。非常に大きな値だけが何らかの影響を及ぼしましたが、位置が偏りすぎています。

には#container3つの要素がすべて含まれています。

#container {
position:relative;
margin: 0 auto;
width:790px;
}

#chicklogo {
float:left;
border:1px solid black;
}

#rightext {
float:left;
border:1px solid black;
}

#navbar {
clear:both;
border:1px solid blue;
}

Answer 1

浮いた要素の中で最も高いものに分類されるため、これは不可能#navbarです。clear:bothあなたの画像から、それ#rightextは背が高く、その#navbar下にぴったりと収まっていることがわかります。

ロゴと右のテキストに同じ高さを与えると、ナビゲーションは両方のすぐ下に配置されます。

Answer 2

に設定されていても、ナビゲーションバーが前の要素とオーバーラップすることを意味するネガティブを示すために、JSフィドルを作成しました。margin-topclear: both

理想的には、#righttext要素の空白がレイアウトの問題を引き起こしているように見えるため、要素の高さを低くしますが、それが不可能な場合は、負のマージントップも機能します。