在學習過程中，要求實現在網頁底端布置成組導航欄的功能，效果如圖：

對於如何實現該功能，薩摩對圖片進行了觀察，初步的想法是，建立三行p標簽實現分行，每行標簽裏嵌套5個a標簽，之後統一調節a標簽之間的margin實現對齊垂直方向的對齊。想法固然尚可，但在實際編碼過程中，發現困難重重，主要問題在於第一行無論是文本字符數還是字體大小的樣式都和二三行不一致，所以在垂直方向上的對齊排列難以用一條margin來統一實現。若用多條樣式語句對特殊情況進行具體設置，雖然確實能實現目標，但多條語句不但增大了開發者的勞動量同時大大增加了代碼出錯的概率。因此，最合適的做法是思考新的算法。在老師的啟發下，結合新學的知識，薩摩茅塞頓開。水平方向上分解不行，那就垂直方向上分解。可以建立五列aside標簽，每一列aside裏先對三行a標簽進行垂直方向對齊，再利用浮動將五列aside進行left浮動。因為五列aside並沒有超越包含塊寬度，因此可以自動整齊地水平居左對齊，這樣就能實現水平和垂直方向上的對齊。

代碼示例：

<aside>
            <h1><a href="">我是管理員</a></h1>
            <p><a href="">用戶管理</a></p>
            <p><a href="">課程管理</a></p>
        </aside>
        <aside>
            <h1><a href="">我是學生</a
 
></h1>
            <p><a href="">如何註冊</a></p>
            <p><a href="">購買課程</a></p>
        </aside>
        <aside>
           <h1><a href="">聯系我們</a></h1>
            <p><a href="">關於我們</a></p>
 

            <p><a href="">聯系我們</a></p>
        </aside>
        <aside>
            <h1><a href="">商業應用</a></h1>
            <p><a href="">商務合作</a></p>
            <p><a href="">內容招募</a></p>
        </aside>
        <aside>
            <h1><a href="">系統幫助</a></h1>
            <p><a href="">購買課程</a></p>
            <p><a href="">作業提交</a></p>
        </aside>

a{
    padding: 17px;
    color: #e6e6e6;
    font-size: 14px;
}
h1>a{
    font-size: 16px;
    color: #ffffff;     
}
aside{
    padding: 50px;
    float: left;
    line-height: 2;
}

簡單有效的幾行代碼即可實現功能。這項需求實現的思考過程給初學者的啟發就在於，對各種不同標簽的定義和作用固然要了然於心，對代碼實現功能的架構上也固然重要，但相對於此，仔細研究思考算法，加深對標簽的理解，做到靈活運用，遠比生硬套用關鍵。這是對一個合格的前端工程師最基本的要求。

float浮動在制作導航欄上的巧用