css - Html/Css 中 DIV 标签的问题

Question

我一直在尝试创建一个网站，但 div 标签似乎没有按计划运行。对于横幅 div、 Logo div 和主导航系统 div，它们完全符合我想要的位置，但是当我尝试定位时子导航栏和搜索栏，它们的位置很奇怪？我看不出我的代码做错了什么，一切看起来都很好。

基本上，对于子导航栏，我希望它位于 logo div 下方，然后对于 search div，我希望它略微位于主导航系统下方。下面的代码使事情变得更容易，在此先感谢!

http://jsfiddle.net/xyDt2/

我相信这是我遇到问题的代码:

html

<div id="SubNavBar">
<a id="LaptopsOver" href="#" class="left" > </a>
<a id="NetbooksOver" href="#" class="left" ></a>
<a id="TabletsOver" href="#" class="left" ></a>
<a id="eRaaderOver" href="#" class="left" ></a>
</div>

CSS

#SubNavBar {
border: 3px solid #000;
margin-right: auto;
margin-left: auto;
height: 209px;
width: 100px;
left: auto;
right: auto;
}

Answer 1

当您 float div 中的所有元素时，该 div 的高度会收缩为零，并且跟随它的元素将受 float 子元素的支配元素。

解决此问题的最快方法是将 overflow: auto 添加到容器中:

#Banner, #SearchBar, #SubNavBar {
    overflow: auto;
}

http://jsfiddle.net/mblase75/xyDt2/6/

一个更全面的解决方案是添加一个clearfix到每个容器 div，但是 overflow:auto 对于现代浏览器应该足够了。