浮动布局的特殊案例 第一种，下边每个浮动元素的父级都设置了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="#">东西</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>
            </ul>
        </nav>
        <!-- 绿色导航 -->
        <nav class="nav_bottom clearfix">
            <ol class="clearfix"> 
                <li><img src="./indeximg/lg_main_a11_1.pn   g" alt=""></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><input type="text"placeholder="搜索你感兴趣的内容和人..."</li>
            </ol>
        </nav>
    </header>

******************************************************************************************
css变化之后：第一种情况
header{  
    background-color: orange;
}
.nav_top{
    background-color: gray;
    height: 40px;
    /* 注意这里设置了高度   把灰色nav高度固定 */
}  
ul>li{
    float: left;
    /* display: inline-block;  */
    margin: 15px;
    background-color: red; 
} 
ul>li:nth-child(n + 12){float: right;}
ol{ /* 这里让其居中*/
    width: 950px;
    margin: 0 auto;  
}
ol>li{
    /* display: inline-block; */ 
    float: left;
    list-style: none; 
    margin-left: 15px;
    background: yellow; 
}

上边的两个列表都进行了浮动布局，第一个nav设置了高度，当对第一个nav中的li进行margin设置时，如果过大超出了nav的高度后，会影响下边的nav中的 li 的布局，发生下边的这种情况，不能正常显示，（如下图黄色背景的字出现在红色背景字的垂直下方，）这是因为设置了高度，同时margin值太大，挤掉了下边nav的位置（也就是说，当浮动元素间出现了位置抢占的情况，后边的浮动会主动避让，即使是父级都添加了 clear:botn ）

.nav_top{
    background-color: gray;
    height: 40px;
    /* 注意这里设置了高度 */
}  
ul>li{
    /* float: left; */
    display: inline-block; 
    margin: 15px;
    background-color: red; 
} 
ul>li:nth-child(n + 12){float: right;}
ol{ /* 这里让其居中*/
    width: 950px;
    margin: 0 auto;  
}
ol>li{
    /* display: inline-block; */ 
    float: left;
    list-style: none; 
    margin-left: 15px;
    background: yellow; 
}

上图，当浮动元素的上个正常文档流的元素添加margin,除非值太大，一般不会影响浮动元素的整体布局

.nav_top{
    background-color: gray;
    height: 40px;
    /* 注意这里设置了高度 */
}  
ul>li{
    float: left;
    /* display: inline-block;  */
    margin: 35px;
    background-color: red; 
} 
ul>li:nth-child(n + 12){float: right;}
ol{ /* 这里让其居中*/
    width: 950px;
    margin: 0 auto;  
}
ol>li{
    display: inline-block; 
    /* float: left; */
    list-style: none; 
    margin-left: 15px;
    background: yellow; 
}

上图，跟前一个案例一样，当浮动元素的上个正常文档流的元素添加margin,除非值太大，一般不会影响正常文档元素的整体布局

.nav_top{
    background-color: gray;
    height: 40px;
    /* 注意这里设置了高度 */
}  
ul>li{
    /* float: left; */
    display: inline-block; 
    margin: 28px;
    background-color: red; 
} 
ul>li:nth-child(n + 12){float: right;}
ol{ /* 这里让其居中*/
    width: 950px;
    margin: 0 auto;  
}
ol>li{
    display: inline-block; 
    /* float: left; */
    list-style: none; 
    margin-left: 15px;
    background: yellow; 
}

上图，当正常文档流之间的子元素不会因为margin值相互影响

当然在正常情况下，不会将自身W/H+margin 的值超出父元素的高度，因为这样会产生很多问题，最近在研究浮动盒子，就做了小小的案例