Question

我似乎有一个特殊的问题。

我有以下代码片段，你可以看到我刚刚在最后添加了页脚div：

<body>
    <div id="conainer">
        <div id="wrapper">
            <p>this is the wrapper</p>
            <div id="centerDoc">
                <p>this is the centerDoc</p>
            </div>  <!--centerDoc !-->
        </div> <!-- wrapper !-->
    </div> <!--container !-->
    <div id="footer">
        <p>footer</p>
    </div>
</body>

我得到了以下输出[我添加了边框以查看最新情况]：

The output:

我希望你能看到centerDoc div在页脚div中，我不明白为什么。

div的CSS：

#container {
   margin:auto;
   width: 100%;
}

#wrapper{
    width:80%;
    border:1px dashed black;
}

#centerDoc {
   margin-top:2.8%;
   margin-left:10px;

   float:left;
   width: 100%;
   border:1px dashed black;
}

#footer{
    text-align:center;
    color:#333333;
    border:1px dashed black;
}

任何有关排序的提示都表示赞赏！

Answer 1

这是正常行为。您的#centerDoc分区向左浮动，因此它的位置是正确的。但是，因为它是浮动的，所以它从文档流中移除，因此它不包含在包装器分区的高度中，并且页脚部分填充在它后面，然后文本向下移动，使得它不会落后于其他内容。

Answer 2

@animuson是对的。你可以使用“clear：both;”要解决这个问题。见下文

<pre>
#footer{
    text-align: center;
    color: #333333;
    border: 1px dashed black;
    clear: both;
}
</pre>

css页脚包含中心文档

2 个答案: