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> 

問： 是在propertie clear: both需要在footer中的情況下， footer與colx（col1，col2，col3）有什麼不同？

Answer 1

如果您在頁腳內部漂浮元素，那麼是清晰的：兩者都可能是必需的。如果你不是在頁腳內部漂浮元素，那麼你可以採取明確的：都出來。

另一種方式來處理浮動元素就是用這樣的結構：無論是在#footer的

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