我在哪裏可以清除浮動問題？

Question

我想使用clear-fix清除我的導航欄上的浮動，所以容器的高度將是其子元素的高度。但我不確定應該在哪裏做清晰的修復。

這裏是我的html：

<div class="container"> 

      <nav id="nav"> 
       <a href="#principle_1">1</a> 
       <a href="#principle_2">2</a> 
       <a href="#principle_3">3</a> 
       <a href="#principle_4">4</a> 
       <a href="#principle_5">5</a> 
       <a href="#principle_6">6</a> 
       <a href="#principle_7">7</a> 
       <a href="#principle_8">8</a> 
       <a href="#principle_9">9</a> 
       <a href="#principle_10">10</a> 
       <div class="clear"></div> 
      </nav> 

     </div> 

我發現，當我把明確的修復程序的導航，明確資產淨值的子元素的浮動。當我把它放在導航之外，但在容器中時，它也可以工作。（見下面的代碼）由於兩個位置都起作用，所以我不確定這兩個位置之間有什麼區別。

<div class="container"> 

      <nav id="nav"> 
       <a href="#principle_1">1</a> 
       <a href="#principle_2">2</a> 
       <a href="#principle_3">3</a> 
       <a href="#principle_4">4</a> 
       <a href="#principle_5">5</a> 
       <a href="#principle_6">6</a> 
       <a href="#principle_7">7</a> 
       <a href="#principle_8">8</a> 
       <a href="#principle_9">9</a> 
       <a href="#principle_10">10</a> 

      </nav> 
      <div class="clear"></div> 

     </div> 

Answer 1

將nav元素括起來，以便它是clearfix的子元素。

層次結構應該看起來像這樣：div.container > div.clear > nav