CSS clear屬性一定記得加上寬和高

記錄一次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 onclick="nav('blog')">博客</li>
        <li onclick="nav('bookmark')">精華書籤</li>
        <li onclick="nav('source')">文件資源</li>
        <li onclick="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