浮动布局的特殊案例 第一种，下边每个浮动元素的父级都设置了clear:both

*{
    padding: 0;
    margin: 0;
}
a{
    text-decoration: none; 
}
li{
    list-style: none;
}
.clearfix::after{
    content: "";
    display: block;
    clear: both;
}


    <header>
        <!-- 黑色导航 -->
        <nav>
            <ul class="clearfix nav_top">
                <li><a href="#">豆瓣</a></li>
                <li><a href="#">读书</a></li>
                <li><a href="#">电影</a></li>
                <li><a href="#">音乐</a></li>
                <li><a href="#">同城</a></li>
                <li><a href="#">小组</a></li>
                <li><a href="#">阅读</a></li>
                <li><a href="#">FM</a></li>
                <li><a href=