html - CSS Positions 和 floats 一切都在叠加

Question

您好，由于某种原因，我的 css 有问题，我无法在另一个 div 下获取一个 div，所以这是我的代码

现场演示 adamlisik.co.uk/kantor2 这是我的 CSS

body{
margin: 0;
font-family: Arial, sans-serif;
font-size: 13px;
line-height: 18px;
padding:0px;
background-image:url('../images/bg-body.jpg');
background-attachment:fixed;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: inherit;
  font-weight: bold;
  color: inherit;
  }
h1 {
  font-size: 30px;
  line-height: 36px;
}
h2 {
  font-size: 24px;
  line-height: 36px;
}
h3 {
  line-height: 27px;
  font-size: 18px;
}
h4,
    h5,
h6 {
  line-height: 18px;
}
h4 {
  font-size: 14px;
}
h5 {
  font-size: 12px;
}
h6 {
  font-size: 11px;
  color: #999999;
  text-transform: uppercase;
}
p {
  margin: 0 0 9px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  line-height: 18px;
    color:#0d0d0d;
}
hr{ border:none; height:1px; margin:30px 0; background-color:#CCCCCC; color:#CCCCCC; }
    .hr{ border-top:1px solid #CCCCCC; margin:30px 0; }
.container {
width:1000px;
margin: auto;
padding:0px;
background:#FFF;
}
.header { 
position:relative; 
z-index:10; 
background-image:url('../images/logo1.jpg');
background-repeat:no-repeat;
background-position:left bottom; 
height:100px;
width:950px;
margin:auto;

}

ul#dropdown-menu{  float:right; list-style:none; margin-bottom:0px; padding-top:70px; }       
ul#dropdown-menu li{ float: left; }
ul#dropdown-menu li a{ display: block; padding:7px 21px 5px 0; font-size:16px; text-transform:none; color:#252525;text-decoration:none; font-weight:bold; }            
ul#dropdown-menu li a:hover{ color:#FF0000;}
ul#dropdown-menu li.hover a{ text-decoration:underline;  }           
ul#dropdown-menu li.current > a{ color: #FF0000; }                             
ul#dropdown-menu li .sub-menu li a{ color:#252525; }                               
ul#dropdown-menu li.last > a{ padding-right:0px; }

.money {
    margin-top:20px;
    background-image:url('../images/hr-bg.jpg');
    height:120px
}

.content {
padding:25px 50px 10px;
}

.footer {
padding:5px 15px 10px;
}

现在，只要您在 css 中添加接下来的两个类，就可以让表格转到另一边

 .left {
float:left;
}
.right {
float:right;}

一切都在变化，hr 在表格之上，所有页脚样式都不起作用

知道如何解决这个问题吗？

Answer 1

当您将 float 属性添加到一个元素时，它会从正常流中移除，因此它的父元素(仍在正常流中)的行为就好像 float 元素不再是它的子元素一样.

你可以这样解决:

.hr{ clear: both; }

希望对您有所帮助。