【CSS】当ul和本该稳居下方的div发生重叠时，给div设置overflow:auto;以解决问题

需求:实现一个tabbed菜单

html代码：

    <div id="blueTabDiv">
    <ul>
        <li><a href="" class="active">接口信息</a></li>
        <li><a href="">返码说明</a></li>
        <li><a href="">示例代码</a></li>
        <li><a href="">接口文档</a></li>
        <li><a href="">升级版本</a></li>
    </ul>
    
    <div class="tabContentDiv">
        2321321
    </div>
    </div>

期望:ul实现上面的选项卡片，tabContentDiv实现下方的内容。

实际：tabContentDiv与ul发生重叠，tabContentDiv覆盖了ul的内容。

解决方案：ul不用任何改变，只给tabContentDiv设上属性 overflow:auto; 这是关键一句

最终CSS代码：

        #blueTabDiv ul{
            border-bottom:1px solid blue;
            display:block;
            float:left;
            list-style:none;
            margin:0;
            padding:0;
            width:100%;
        }
        #blueTabDiv ul li{
            float:left;
        }
        #blueTabDiv ul li a{
            background:white;
            color:black;
            display:block;
            height:40px;
            line-height:40px;/*line-height与height等同是使文字垂直居中的一种方法*/
            text-align:center;
            width:120px;
        }
        #blueTabDiv ul li a:hover{
            background:blue;
            color:white;
        }
        #blueTabDiv ul li a.active{
            background:blue;
            color:white;
        }
        #blueTabDiv .tabContentDiv{
            border-left: 1px solid blue;
            border-right: 1px solid blue;
            border-bottom: 1px solid blue;
            overflow:auto;
        }

效果图：

 参考资料：https://www.jb51.net/css/167623.html

END