CSS clear属性一定记得加上宽和高

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/ap114/article/details/102319426

记录一次CSS clear属性的教训。

最开始，需要清除float：left对后面元素带来的布局影响。

在我的CSS里，就理所当然的写下了这一段clear

CSS代码：

.clear{
    clear:both;/*清除浮动*/
}

/*顶部导航栏*/
#topNav{
    position: relative;
    margin-top: -26px;
    padding-left: 250px;
    background-color: rgba(50, 48, 50, 0.5);
}
#topNav ul{
    margin-top: 32px;
    width:100%;
    list-style:none;
}
#topNav ul li{
    padding: 10px;
    min-width: 80px;
    float: left;
    color: white;
    list-style: none;
    font-size: 0.8em;
    font-family: '宋体';
    text-decoration: none;
    text-align: center;
}

HTML代码：

<div id="topNav">
    <ul>
        <li οnclick="nav('blog')">博客</li>
        <li οnclick="nav('bookmark')">精华书签</li>
        <li οnclick="nav('source')">文件资源</li>
        <li οnclick="nav('lab')">自研实验室</li>
        <div class="clear"></div>
    </ul>
</div>

在谷歌浏览器上看上去一切都没问题，各种屏幕适配也都OK

但在自己的荣耀V9 上就是有问题。

左边空出来的一片特别扎眼，尝试改过li 的margin、div的margin，left也调试过，但都不是解决问题的根本方法。这期间各种调试都没没错。直到刚才吃饭后，猛地发现，左边空出来的这一块怎么和导航栏左边对上了。顺着这思路，检查完每个属性和参数，目光焦距在了clear上。在css后添上了两行高宽后。

/*其他样式*/
.clear{
    clear:both;/*清除浮动*/
    width:0px;
    height:0px;
}

问题瞬间解决，泪崩。

使用clear一定不要忘记加上宽高属性。。。。。

博客重建地址：www.cnkizy.com