无法将元素移动到更靠近浮动元素

Question

为什么#navbar无法进一步向上移动？我试过了margin-top，但它没有用。只有极大的值才会产生一些影响，但定位过于偏斜。

#container包含所有3个元素。

#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 Fiddle to demonstrate一个否定margin-top，这意味着导航栏会与前一个元素重叠，即使它设置为clear: both。

理想情况下，您会降低#righttext元素的高度，因为该元素中的空白区域会导致布局问题，但如果不可能，则负边距顶部也可以工作