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

Question

为什么不能#navbar进一步向上移动？我试过margin-top了，但没有用。只有一个非常大的值有一些效果，但是定位太倾斜了。

包含所有 3个#container元素。

#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 来演示否定性margin-top，这意味着导航栏将与前面的元素重叠，即使它设置为clear: both.

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