css clearfix isnt working as it supposed to be - html

Question

I have to floated elements in my div, I used clearfix I found in internet, but it isn't working as it should.
<div id="header" class="clear">
<div class="header-left"> </div>
<div class="header-right">
<div class="quick-drop">
<ul>
<li class="quicklinks">Quicklinks
<img src="images/quicklink-icon.png" />
</li>
<li class="dropdown">Select from dropdown
<img src="images/dropdown-icon.png" />
</li>
</ul>
</div>
<div class="search-block">
<input type="text" class="search" name="search" placeholder="Search for something here" />
</div>
</div>
<div class="header-nav">it should be below but it is under</div>
</div>
CSS
.clear:before, .clear:after {
content:"\0020";
display: block;
height: 0;
overflow: hidden;
}
.clear:after {
clear: both;
}
.header-left {
float:left;
margin:40px 0;
}
.header-right {
float:right;
margin:40px 0;
}
.logo {
background:url('../images/logo.png') no-repeat;
width:250px;
height:50px;
display:block;
}
.quick-drop {
display:inline-block;
}
.quick-drop ul {
margin:0;
padding:0;
margin:18px 0;
}
.quick-drop ul li {
list-style-type:none;
display:inline-block;
height:19px;
padding:3px;
text-align:center;
font-size:12pt;
}
ul .quicklinks {
color:#c7c7c7;
border-right:1px #c7c7c7 solid;
}
ul .dropdown {
color:#58159b;
}
.quick-drop ul li img {
margin:0 15px;
}
.search-block {
display:inline-block;
}
.search {
background:url('../images/search-icon.png') right no-repeat #fff;
background-position:260px;
width:260px;
height:16px;
border:none;
outline-color:#58159b;
padding:15px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
color:#c7c7c7;
}
http://jsfiddle.net/qKFAc
The .header-nav should be below the 2 divs, but it is under them, what I'm doing wrong?
Thank you.

Answer 1

Clear fixes should be AFTER the floated elements, like so:
Remove the clear class from the parent. Then:
<!-- Floated -->
<div class="clear"></div>
<div class="header-nav">it should be below but it is under</div>

Answer 2

.header-nav
{
clear:left;
}
please add this css rule

Answer 3

Add this:
.clear {
clear: both;
}
jsFiddle: http://jsfiddle.net/qKFAc/1/