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

最新推荐文章于 2022-05-26 10:03:57 发布

单枪匹马跑天下

最新推荐文章于 2022-05-26 10:03:57 发布

阅读量247

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_41170620/article/details/104597031

版权

本文探讨了浮动布局中，当父级设置clear:both时，浮动元素如何受上层margin影响导致布局异常。通过案例展示，说明了即使设置clear:both，过大的margin仍可能导致后续浮动元素位置改变，影响整体布局。

摘要由CSDN通过智能技术生成

*{
    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=