爲什麼浮動塊必須在前面？

Question

HTML代碼：

<div class="nav_wrapper"> 
    <div id="logo_container"> 
     <img src="img/logo.png" height="40" width="135"> 
    </div> 
    <ul class="nav"> 
     <li><a href="index.html">首頁</a></li> 
     <li><a href="blog.html">文章</a></li> 
     <li><a href="gallery.html">作品</a></li> 
     <li><a href="about.html">關於</a></li> 
    </ul> 
</div> 

CSS代碼：

.nav_wrapper { 
    position: relative; 
    width: 980px; 
    margin: 0 auto; 
} 
ul.nav { 
    float: right; 
} 
#logo_container { 
    line-height: 80px; 
    width: 135px; 
} 
#logo_container img { 
    vertical-align: middle; 
    border-radius: 50%; 
} 

如果div#logo_container的ul前，ul塊會出它的父親塊怒吼咆哮，父親的塊。

我已經設置了div#logo_container寬度，並將margin，padding設置爲0px;但是爲什麼ul塊仍然顯示在下一行和父塊之外。

但是當我把ul之前div#logo_container，它會沒事的。

Answer 1

.nav將被置於#logo_container之下，因爲#logo_container是block-level。

.nav_wrapper { 
 
    position: relative; 
 
    width: 400px; 
 
    margin: 0 auto; 
 
} 
 
ul.nav { 
 
    float: right; 
 
} 
 
#logo_container { 
 
    line-height: 80px; 
 
    width: 135px; 
 
} 
 
#logo_container img { 
 
    vertical-align: middle; 
 
    border-radius: 50%; 
 
} 
 

 
#logo_container { 
 
    display: inline-block; 
 
}

<div class="nav_wrapper"> 
 
    <div id="logo_container"> 
 
     <img src="img/logo.png" height="40" width="135"> 
 
    </div> 
 
    <ul class="nav"> 
 
     <li><a href="index.html">首頁</a></li> 
 
     <li><a href="blog.html">文章</a></li> 
 
     <li><a href="gallery.html">作品</a></li> 
 
     <li><a href="about.html">關於</a></li> 
 
    </ul> 
 
</div>