2个集装箱分区之间的未知空间

Question

我试图确定为什么如图所示在2个包含分区之间会有空间，我将非常感谢为何会发生这种情况：

未知空间出现在中间特征div（橄榄色）和底部包裹div（橙色）

之间

我没有设置任何高度。

我希望在它上方看到橙色的div与橄榄色的div。

我可以发布所有CSS，或者你可以使用FireBug：www.davincispainting.com

以下是所有CSS：

*{ margin:0; padding:0 }
body
{
/*background: url("/images/blueback5.jpg") repeat-x scroll 0 0 transparent;*/
background-color: #9EB0C8;
font-family: Arial,Helvetica,sans-serif;
font-size: 62.5%;
}
#top-wrap {
height: 126px;
width: 940px;    
/*background-color: Yellow;*/
margin: 5px 0 0 0;
}
#head-logo {
background: url("/images/logo3.png") no-repeat scroll 0 0 transparent;
/*background-color: Green;*/
height: 126px;
width: 214px;
margin: 0px 0 0 58px;
position: absolute;
z-index: 100;
}
#submenu1 {
border: 0 solid #000000;
color: #FFFFFF;
/*background-color:Green;*/
font-family: Arial,Impact,Impact5,Charcoal6,sans-serif;
font-size: 1.6em;
height: 35px;
width: 155px;
/*padding: 10px 0 0;*/
margin: 7px 0 0 774px;
position: absolute;
}
#submenu2 {
/*border: 0 solid #000000;*/
color: #FFFFFF;
/*background-color:Blue;*/
font-family: Arial,Impact,Impact5,Charcoal6,sans-serif;
font-size: 1.8em;
text-align: right;
height: 20px;
width: 114px;
margin: 30px 0 0 818px;
/*padding: 5px 0 0;*/
}    

a.contact
{
background-image: url("/images/RapidButton2.png");
/*border: 1px solid #CCCCCC;*/
/*clear: both;*/
/*color: #FFFFFF;*/
display: block;
font-size: 11px;
/*margin-bottom: 1px;*/
/*padding: 3px 5px;*/
text-align: center;
width: 165px;
height: 27px;
}
a.contact:hover
{
background-image: url("/images/RapidButtonHov2.png");
}

#navigation-primary {
margin: 12px 0 0 276px;
position: absolute;  
}
#global-wrap {
margin: 0 auto;
text-align: left;
width: 880px;
overflow: hidden;
}
#global-inner {
background: url("/images/main_bg.gif") repeat-y scroll 0 0 #E4EAEF;
font-family: Arial;
font-size: 1.2em;
margin: 15px 0 55px 0;
overflow: hidden;
text-align: left;
width: 880px;
}
#global-inner .topleft {
background: url("/images/main_left_top_corner2.jpg") no-repeat scroll left top transparent;
float: left;
height: 9px;
width: 9px;
}
#global-inner .topright {
background: url("/images/main_right_top_corner2.jpg") no-repeat scroll right top transparent;
float: right;
height: 9px;
width: 9px;
}
#global-inner .bottomleft {
background: url("/images/main_left_bottom_corner.jpg") no-repeat scroll left bottom transparent;
float: left;
height: 9px;
margin-top: -8px;
/*margin: 776px 0 0 0;*/
width: 9px;
}
#global-inner .bottomright {
background: url("/images/main_right_bottom_corner.jpg") no-repeat scroll right bottom transparent;
float: right;
height: 9px;
margin-top: -8px;
/*margin: 776px 0 0 0;*/
width: 9px;
}
#top-feature {
height:330px;
width: 848px;
margin: 12px 0 0 16px;
background: #E4EAEF;
/*background: orange;*/
/*padding: 10px 0 0 10px;*/
position: absolute;
text-align: left;
}
.slideshow {
height: 330px;
width: 848px;
margin: 0 0 0 0;
/*background: blue;*/
position: absolute;
}
#mid-feature
{
margin:350px 0 0 16px;
width:848px;
height:318px;
background-color:Olive;
position:relative;
overflow:hidden;  
}
#mid-featureleft
{
height:318px;
width:552px;
/*background-color:Purple;*/
float:left;
position:relative;
}
#mid-featureright
{
height:318px;
width:296px;
background-color:#B9C1CC;
/*background-color: red;*/
float:left;
position: relative;
}

#mid-featureleft h1 
{
color: #FF0000;
font-family: Arial,Helvetica,sans-serif;
font-size: 2.1em;
}
#mid-featureleft .contentbox
{
padding:7px 7px 7px 7px;
}
#mid-featureleft p 
{
color: #0C2A55;
margin:0px 0 11px 0px;
/*font-style:normal;*/
/*width: 97%;*/
/*font-size: .5em;*/
font-size: 12px;
}

#bottom-wrap
{
height:60px;
width: 868px;
margin: auto 0 0 6px;
background:orange;
position: relative;   
}
#copyright
{
float: left; 
/*background-color:Teal;*/ 
width: 260px; 
height: 60px;
text-align: left;
position: absolute;
margin:0 0 0 6px; 
}
#bottom-logos
{
height:60px;
width:596px;
margin:0 0 0 267px;
background: url("/images/logos2.png") no-repeat scroll 0 0 transparent;
/*background-color:red;*/
position:absolute;  
}

Answer 1

我看了一下你的页面，你在div之间有两条<br style="clear: both">行。拿出来，应该没问题。

Answer 2

正如Richard Pianka所指出的，<br style="clear: both;">导致了额外的垂直空间，这就是<br>所做的。如果您不想因为担心清除浮动而完全丢弃它们，那么使用没有固有视觉表示的标记：

<div style="clear: both;"></div>