页脚重叠重叠的div - CSS

Question

Float Image和div分别左右。浮动页脚与图像和div混合后。

的HTML

<img src="images/AboutUs.jpg" class="about_us" alt="about us" />
<div id="description">
djfdjfj
</div>

CSS

.about_us {
border: solid 1pt #efefef;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
width: 30%;
margin-left:  5px;
float: left;
border-collapse: collapse;
}

#description{
background-color: #ffffff;
width: 69.2%; 
float: right;
border-collapse: collapse;
}

页脚

footer{
width:100%;
border-width:1px 0px 0px 0px;
border-style:solid none none none;
}

这是图片

那里发生了什么？

Answer 1

尝试将此附加到您的页脚css

footer{
float:left;
}

Answer 2

你应该在前往下一行之前清除浮动。像这样

 <img src="images/AboutUs.jpg" class="about_us" alt="about us" />
 <div id="description">
   djfdjfj
 </div>
 <div style="clear:float;"></div>

或者您需要将父div宽度共享给所有子float div而不会出现1px错误。像这样

.about_us {width:30%;}
#description{width:70%}

尝试任何适合你的

Answer 3

每当你浮动div或图像时......那么你必须清除所以另一个div不能混合。 Clear属性不允许在此属性旁边使用浮动。

示例：

<div class="main">
<img src="images/AboutUs.jpg" class="about_us" alt="about us" />
<div id="description">
djfdjfj
</div>

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