用浮動清理DIV

我有一個div（導航），它是「float：left;」。這個div的主要內容來之後。第二個div來自第一個div。用浮動清理DIV

如果我添加style =「clear：both;」在第一個dif之後，它就起作用了。但是，我想知道這是否是正確的方式來做到這一點，這是我唯一的問題。

<div class="nav"> 
    <ul> 
     <li><a href="">text</a></li>... 
    </ul> 
</div> 
<div style="clear:both;"></div> 
<div id="content-wrapper"></div>  

.nav{ 
    width: 100%; 
    float: left; 
    margin: 0 0 3em 0; 
    padding: 0; 
    list-style: none;  
} 

.nav li{ 
    float: left; 
    margin: 0 2px; 
} 

.nav li a{   
    display: block; 
    padding: 8px 15px;   
    text-decoration: none; 
    font-weight: bold; 
    color: #fff; 
    border-right: 1px solid #ccc; 
    background-color: #3b3d49; 
    -webkit-border-radius: 7px 7px 0px 0px; 
    border-radius: 7px 7px 0px 0px; 
}

來源

2013-03-22 renathy

明確：兩者都可以 – 2013-03-22 12:12:00

浮動元素需要清除，如果你想讓元素在它們下面正常顯示 – Pete 2013-03-22 12:12:24

據我所知，它的罰款和正確。把它通過一個W3C驗證... – DavidB 2013-03-22 12:12:45

是的，這工作正常。但是，您不需要其他元素來清除內容，您可以將樣式添加到內容包裝器。

在樣式表：

#content-wrapper { clear: both; }

另一種方法是添加一個容器的浮動元素周圍，並使其使用overflow風格包含它的孩子：

<div class="nav-container"> 
    <div class="nav"> 
    <ul> 
     <li><a href="">text</a></li>... 
    </ul> 
    </div> 
</div> 
<div id="content-wrapper"> 
</div>

然後在你的樣式表中加入：

.nav-container { overflow: hidden; }

來源

2013-03-22 12:13:03 Guffa

在回答你的問題，清理漂浮跟clear:both;是這樣做的一個非常標準的方式，是的。

來源

2013-03-22 12:12:47 rhughes

這是最好的方式，只需添加類。集團要將容器

.group:before, 
.group:after { 
    content: ""; 
    display: table; 
} 
.group:after { 
    clear: both; 
} 
.group { 
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */ 
}

來源

2013-03-22 12:12:48 iConnor

主要採用上述"clear:both"

clear屬性指定了一個元素的兩側，而其他浮動元素不允許。