css - div重叠/错位

Question

我在 my page 上有一个页脚，内容正确放置在 div#main 下(包括 div#left 和 div#right)，但背景(蓝色的大东西)放置在 div#main 之上。

我试过显示: block 和 z 索引 div，但无济于事。

有人知道发生了什么事吗？

代码:

body {
  background:url(aaa-bg.jpg) repeat-x #e7e9e9;
  margin:0;
  padding:0;
  color:#383838;
  font:12pt verdana;
}

img {
  border:0;
}

a:link {
  color:#e29511;
  text-decoration:none;
}

a:hover {
  color:#e29511;
  text-decoration:underline;
}

a:visited {
  color:#808080;
}


/* header ------------------------------------------------------------------------------ */

#header {
  margin:10px auto 10px;
  width:800px;
  height:97px;
}

/* nav ------------------------------------------------------------------------------ */

#nav {
  width:800px;
  margin:0px auto 3px;
  height:30px;
}

#nav ul {
  margin:0 0px 0px 0;
  padding:0;
  list-style:none;
}

#nav ul li {
  width:140px;
  height:20px;
  padding:5px 0 5px 0;
  float:left;
  margin:0 10px 0 0;
  background:#cdcdcd;
  color:#000000;
  position:relative;
  z-index:99999;
  text-align:center;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  border-top:3px solid transparent;
  border-left:3px solid transparent;
  border-right:3px solid transparent;
}

#nav ul li:hover {
  cursor:pointer;
  border-top:3px solid #e29511;
  border-left:3px solid #e29511;
  border-right:3px solid #e29511;
}

#nav ul li.home {
  width:140px;
  height:20px;
  padding:5px 0 5px 0;
  float:left;
  margin:0 10px 0 0;
  background:#cdcdcd;
  color:#000000;
  position:relative;
  z-index:99999;
  text-align:center;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  border-top:3px solid transparent;
  border-left:3px solid transparent;
  border-right:3px solid transparent;
}

#nav ul li.home:hover {
  cursor:pointer;
  -moz-box-shadow: 5px 5px 2px #656565;
  -webkit-box-shadow: 5px 5px 2px #656565;
  box-shadow: 5px 5px 2px #656565;
}


#nav ul li ul {
  width:140px;
  margin:5px 0 0 -3px;
  float:left;
  -moz-box-shadow: 5px 5px 2px #656565;
  -webkit-box-shadow: 5px 5px 2px #656565;
  box-shadow: 5px 5px 2px #656565;
  background:url(aaa-navbg3.png) repeat-x #ffffff;
  border-bottom:3px solid #e29511;
  border-left:3px solid #e29511;
  border-right:3px solid #e29511;
}

#nav ul li ul li {
  width:140px;
  font-weight:normal;
  font-size:10pt;
  background:none;
  border-top:1px solid #808080;
  border-left:none;
  border-right:none;
  border-top-left-radius:0px;
  border-top-right-radius:0px;
}

#nav ul li ul li:hover {
  background:url(aaa-libg2.png) repeat-x;
  border-top:1px solid #808080;
  border-left:none;
  border-right:none;
}


/* toppane ------------------------------------------------------------------------------ */

#toppane {
  width:100%;
  height:210px;
  background:url(aaa-toppane3.jpg) repeat-x;
  padding:20px 0 20px;
  margin:0px 0 20px 0;
  position:relative;
  z-index:-1;
  border-top:1px solid #000000;
  border-bottom:1px solid #000000;
}

#toppane-inner {
  width:800px;
  height:210px;
  margin:0px auto;
}

/* slideshow ------------------------------------------------------------------------------ */

#window {
  clear:both; 
  width:800px; 
  height:210px; 
  overflow:hidden; 
  position:relative; 
  margin:0;
  padding:0;
}

#slideshow {
  width:1600px; 
  height:420px; 
  overflow:hidden; 
  position:relative;
  margin:0;
  padding:0;
}

#slideshow li { 
  width:800px; 
  height:210px; 
  float:left; 
  display:inline;
  margin:0;
  padding:0;
}

/* main ------------------------------------------------------------------------------ */

#main {
  width:800px;
  margin:5px auto;
  padding:0px;
}

#left {
  width:390px;
  margin:0 20px 0 0;
  padding:0px;
  float:left;
}

#right {
  width:390px;
  font-size:11pt;
  margin:0;
  padding:0px;
  float:right;
}

#right img {
  margin:0 0 5px 0;
}

#right a:link {
  text-decoration:none;
  color:#383838;
}

#right a:hover {
  text-decoration:none;
  color:#383838;
}

#right a:visited {
  text-decoration:none;
  color:#383838;
}

h2 {
  width:390px;
  font:14pt verdana;
  border-bottom:1px solid #383838;
  margin:0 0 5px 0;
  text-align:right;
}

.segment {
  margin:0 0 40px 0;
}

#footer {
  background:blue;
  width:800px;
  margin:30px auto;
  color:#ffffff;
}

#footer table {
  width:800px;
}

#footer tr {
  width:800px;
}

#footer td {
  width:200px;
}

Answer 1

将 clear:left; 添加到页脚可以解决这个问题。

您看到的问题是 #left 和 #right 都超出了 #main div，因为它们是 float 的#main div 中的任何内容都不会清除这些 float 。

页脚然后垂直堆叠在 #main div 上，它与 #left 和 #right 的高度不同。

要将主 div 下拉到 float 项上方，您可以做的一件事是在其末尾添加一些内容以清除 float 项。您可以使用 CSS 执行此操作，如下所示:

#main:after{
  content:".";
  display:block;
  clear:both;
  visibility:hidden;
}