p перекрытие с div, хотя оно находится за пределами div

Question

Я пытался создать веб-страницу, но столкнулся с какой-то странной проблемой. Это мой HTML:

HTML

<div id="header"> 
    <div> 
    <h2>Home</h2> 
    </div> 
    <div> 
    <h2>Events</h2> 
    </div> 
    <div> 
    <h2>Projects</h2> 
    </div> 
    <div> 
    <h2>About</h2> 
    </div> 
    <div> 
    <h2>Contact Us</h2> 
    </div> 
</div> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet faucibus velit, eu semper erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus scelerisque lobortis justo ac bibendum. Vivamus vulputate tristique tellus vitae posuere. Nulla imperdiet orci et sem tincidunt ornare. Donec ac justo dui. Cras tempor convallis enim fermentum mattis. Vestibulum vel neque ultricies, molestie diam id, fringilla libero. 
</p> 
<p>Nam porttitor mi et lacus viverra tempor. Maecenas egestas, ante ut lacinia tincidunt, tellus est suscipit ante, suscipit consectetur eros mauris et nunc. Integer nec hendrerit mauris. Suspendisse potenti. Fusce et aliquet ligula, eu tempus orci. Curabitur vitae dignissim erat. Fusce laoreet gravida urna, in volutpat ante facilisis sed. Donec lobortis justo a risus condimentum, non mollis libero posuere. Sed lacinia enim porta, commodo velit a, tristique sapien. 
</p> 
<p>Aenean consequat dolor quis placerat luctus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed gravida metus vitae viverra semper. Cras laoreet pretium sem, eu placerat justo. Duis feugiat volutpat adipiscing. Curabitur ullamcorper suscipit varius. Sed a pulvinar nisi. Nullam aliquam orci a tincidunt convallis. 
</p> 

CSS

body { 
    font:16px/28px verdana; 
    font-family: 'Title',"Lucida Sans","Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif; 
} 
/*#header{ 
    width:100%; 
}*/ 
#header div{ 

    float:left; 
    width: 20%;  /*this has to be changed with the number of elements in header 100/n*/ 
    border-bottom: 1px solid rgba(22,22,22,0.3); 
/* border-bottom: 1px solid rgba(22,22,22,0.5);*/ 

} 
#header div h2{ 
    text-align: center; 
    /*border-right: 1px solid rgba(22,22,22,0.3);*/ 
} 
#header div:hover{ 
    background-color:rgba(0,200,80,1); 
    -moz-transition: background-color,0.6s; 
    -webkit-transition: background-color,0.6s; 
    -o-transition: background-color,0.6s; 
} 
body p:first-child{ 
    clear:none; 
} 
/*{ 
    box-shadow: 10px 5px 5px black; 
}*/ 

Теперь проблема является первым р в теле перекрывается с #header. Почему это происходит? #header не было установлено абсолютно.

Answer 1

#header не имеет высоту, потому что все его дети плавают, поэтому вы видите «перекрывание»: http://jsfiddle.net/qsgq7/3/

Либо перейти к использованию inline-block, или применить к clearfix#header. Example:

#header:after { 
    content:""; 
    display: table; 
    clear: both; 
} 

Answer 2

Это просто предложение, конечно, если вы используете HTML5 в противном случае вы должны изменить <header> & <nav> к дивы.

Вот FIDDLE

<header> 

    <nav> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Events</a></li> 
     <li><a href="#">Projects</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact Us</a></li> 
    </ul> 
    </nav> 

    <span class="clearfix"></span> 

</header> 

---

header { 
    width:100%; 
    margin-bottom: 20px; 
} 
nav ul li { 
    float:left; 
    list-style: none; 
    text-align: center; 
    width: 20%; 
    border-bottom: 1px solid rgba(22,22,22,0.3); 
} 
nav ul li a { 
    display: inherit; 
    padding: 15px 0 15px 0; 
    font-size: 16px; 
    font-weight: bold; 
    color: #333; 
    text-decoration: none; 
} 
nav ul li a:hover{ 
    color: #ccc; 
    background:rgba(0,200,80,1); 
    transition: all 0.4s linear; 
    -moz-transition: all 0.4s linear; 
    -webkit-transition: all 0.4s linear; 
    -o-transition: all 0.4s linear; 
} 
.clearfix { 
    display: block; 
    clear: both; 
}