Question

伙计们请帮助我解决这个浮动问题。我尝试了不同的方法，但任何事都不适合我。 enter image description here

在html文件中，小图像位于全局容器中。脚本放置在全局容器的正下方。但现在页脚位于顶部。

这些是我的css -

图像的CSS -

style="margin-top: 25px; margin-right: 48px; float: right;"<br>
style="margin-top: 25px; margin-right: 48px; float: left;"

#footer_container{
    width: 900px;
    height: 10px;
    margin-top: 10px;
    padding-bottom: 10px;
    position: absolute;
    border: solid;    
}     



#global_body_container{
    width: 746px;
    position: absolute;
    padding-bottom: 10px;
    border-color: #c6c8cc;
    border-style:dashed;
    clear: both;


}

谢谢。

Answer 1

放置浮动元素overflow: hidden的容器。

#global_body_container {
    overflow: hidden;
}

Answer 2

position: absolute;上有#footer_container。删除它，然后在页脚下添加一个空格br，如下所示

<div id="global_body_container">
    <img>
    <img>
    etc...

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

    <div id="footer_container">
         whatever content...
    </div>

</div>


#footer_container{
    width: 900px;
    height: 10px;
    margin-top: 10px;
    padding-bottom: 10px;
    position: absolute;  //REMOVE THIS
    border: solid;    
}

此外，您可能需要考虑在border规则中添加更多内容，例如厚度和颜色，例如border:1px solid black;

Answer 3

创建一个新的“内容容器”。将所有浮动图像放入。然后将新容器放在footer_container之前。

Answer 4

因为global_body_container中的所有元素都是浮点数，所以它无法直观地包装这些图像。

一个简单的解决方案是在global_body_container的末尾添加一个存根，并让它清除浮点元素。

<div id="global_body_container">
    <img class="left">
    <img class="right">

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

shinkou提到了一个清算技巧。您还可以参考clearfix中的compass mixin。扩展的css看起来像：

.clearfix {
    overflow: hidden;
    *zoom: 1;
}

另请参阅What methods of ‘clearfix’ can I use?

中的讨论

需要CSS浮动帮助

4 个答案: