CSS - Clear fix isn't working

Question

I'm applying clear fix to the parent (ul) but it's not working

When set display:block; to the a, then the clear fix works, but why? The code in here

HTML

<nav>
 <ul class="hmenu main-menu group">
   <li><a href="#" class="active">home</a>
   <li><a href="#">services</a>
   <li><a href="#">pricing</a>
   <li><a href="#">portfolio</a>
   <li><a href="#">blog</a>
   <li><a class="no-border last-menu-item" href="#">contact</a>
  </ul>
 </nav>
 <span>sadfsdafsdaf</span>

CSS

.group:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.group { display: inline-block; }
/* start commented backslash hack \*/
* html .group { height: 1%; }
.group { display: block; }
/* close commented backslash hack */
/*
.group:after {
 content: ""; display: table; clear: both; }
*/

.hmenu li{
 float: left;
 display: inline;
 list-style-type: none;
}
a{
 text-decoration:none;
}


.main-menu{
 width: 940px;
 padding: 0;
 border-top:1px solid #4d4d4d;
  background:#3c3c3c;
}
.main-menu a{
 color: #fff;
/*display:block;*/
 padding: 20px 30px;
 border-right:1px solid #5b5b5b;
}
a.last-menu-item{
 margin-right:181px;

}
.main-menu a.active{
 background:#000;
}
a.no-border{
 border: none;
}
a.lang{
 padding:20px 11px;
}
span{padding:10px 10px;
  margin:20px 30px;
background:red;
height:100px;}

Answer 1

Try setting

display: inline-block;

for the span

Answer 2

Your padding on the anchor does not apply, since anchor tag is display inline, so when you set the anchor to display block the padding applies.