Clearfix的问题

Question

我一直在将一个div应用于clearfix时遇到了麻烦，我跟随了几个教程，发现here和here，但我的名为Bar的div仍然不能展开以保存徽标和导航div。

这是我的标记，任何和所有的意见将不胜感激。 我已经让div有一些奇怪的颜色来帮助看看它们在哪里结束，并帮助尝试看看究竟发生了什么。

<div id="bar" class="group"> 
    <div id="nav"> 
     <ul> 
      <a href="#"><li>Home</li></a> 
      <a href="#"><li>What We Do</li></a> 
      <a href="#"><li>Our Work</li></a> 
      <a href="#"><li>Our People</li></a> 
      <a href="#"><li>Contact Us</li></a> 
     </ul> 
    </div> 
    <div id="logo"> 
     <img src="images/logo.png" title="" alt="" /> 
    </div><!--Close Logo--> 

CSS：

body{ 
    margin:0; 
} 

.group:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

#bar{ 
    background-color: #e2871a; 
    width:100%; 
} 

/*NAVIGATION */ 
#nav{ 
    color:#fff; 
    float:right; 
    margin-right:50px; 
    background-color:chartreuse; 
} 

#nav>ul{ 
    list-style:none; 
    padding:0; 
    margin:0; 
} 

#nav>ul li{ 
    display:inline; 
} 

#nav>ul a>li { 
    color:#fff; 
    padding-bottom:100px; 
    background-color:blue; 
    margin-right:15px; 
} 

#nav>ul a>li:hover{ 
    border-bottom:3px solid white; 
} 

#logo{ 
    float:left; 
    width:15%; 
    margin-left:5%; 
    background-color:red; 
} 

Answer 1

问题是：

#nav>ul li{ 
    display: inline; 
} 

顶部/底部填充或余量不影响相对于它们的亲本的内联元件的高度。做它block或inline-block