CSS:很明显，不同级别的 div 都需要

Question

我有这个 CSS 代码:

#header {
    width: 100%;
    background: yellow;
}

#content {
    width: 100%;
}

#col1 {
    width: 200px;
    float: left;
    background: red;
}

#col2 {
    width: 600px;
    background: yellow;
    margin: 0px 0px 0px 200px;
}

#col3 {
    width: 200px;
    float: right;
    background: blue;
}

#footer {
    width: 100%;
    height: 90px;
    background: black;
    clear: both; **<~ This**
}

HTML代码:

<div id="header"></div>
<div id="content">
    <div id="col1"></div>
    <div id="col2"></div>
    <div id="col3"></div>
</div>
<div id="footer"></div>

问题:clear: both 是否需要 footer 以防 footer 与 colx 不同级别(col1, col2, col3)?

Answer 1

如果您在页脚内 float 元素，那么可能需要 clear:both。如果您没有在页脚内 float 元素，那么您可以将 clear:both 去掉。

另一种处理 float 元素的方法是使用这样的结构:

<div class="con">
    <div class="lft">lft</div>
    <div class="rgt">rgt</div>
</div>

.con { overflow:hidden; }
.lft { width:100px; float:left; }
.rgt { width:100px; float:left; }