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

问题：在与（col1，col2，col3）不同级别的情况下是否clear: both需要属性？footerfootercolx

Answer 1

如果您在页脚内浮动元素，则可能需要 clear:both。如果您没有在页脚内浮动元素，那么您可以将 clear:both 取出。

处理浮动元素的另一种方法是使用如下结构：

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