html - 页脚与重叠的 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

You should clear float before going to next line. like this

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

or u need to share parent div width to all child float divs without 1px mistake. like this

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

try any one which is suitable to you

Answer 2

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

footer{
float:left;
}

Answer 3

每当您浮动 div 或图像时.. 那么您必须清除以便其他 div 不能混合。清除属性不允许在此属性旁边浮动。

例子 ：

<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>