一：inline-block中不要嵌套其他block標簽，不然會破壞布局

<style>
　　.left{
　　　　float:left;
　　}
　　.hide{
　　　　display:none;
　　}
　　a{
　　　　display:inline-block;
　　}
　　.item-div{
　　　　display:inline-block;    //此處為內聯標簽，其中包含了下面樣式block塊級標簽，到鼠標滑動到.item-div時，塊級標簽會將原來布局撐開，使原來布局被破壞
　　}
　　item-div:hover item-set{
　　　　display:block;
　　}
</style>

        <div class
 
="hl-menu left">
            <a href="" class-="item">菜單一</a>
            <a href="" class-="item">菜單二</a>
            <a href="" class-="item">菜單三</a>
            <div class="item-div">
                <a href="" class="item">菜單四</a>
                <div class
 
="item-set hide">
                    <a href="">菜單四-1</a>
                    <a href="">菜單四-2</a>
                    <a href="">菜單四-3</a>
                    <a href="">菜單四-4</a>
                </div>
            </div>
        </div>

想到達的效果：

由於其中嵌套不正確：

解決方案：

使得懸浮的標簽進行脫離文本流，則不會影響原來的布局：

        .item-div:hover .item-set{
            display: block;
            position: absolute;　　　　//相對自己（body）進行頁面排布，脫離文本流
        }

        .item-div .item-set a{
            display: block;
            background-color: #4cae4c;
        }

註意同級內聯標簽中任意一個改變都會影響到其他標簽的布局：

例如其中一個margin-top:10px;會將其他的也擠下來。解決辦法是將該標簽float設置，就不在影響同級標簽

二：absolute實現後臺頁面布局：

使用position是元素脫離文本流，然後進行頁面布局：

    <div class="pg-body">
        <div class="menus">

        </div>
        <div class="content">
            <div style="height: 2000px;">

            </div>
        </div>
    </div>

左側布局：

        .pg-body .menus{
            width: 200px;
            background-color: #4cae4c;
            position: absolute;
            bottom: 0px;
            top: 48px;
        }

右側布局：

        .pg-body .content{
            position: absolute;
            top: 48px;
            bottom: 0px;
            right: 0px;
            left: 200px;
            background-color: #1b6d85;
            overflow-y: scroll;
            overflow-x: hidden;
        }

css拾遺（一）