使菜单1和菜单2背景颜色恢复的第二种方法(给其父tag：overflow:hidden) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .outer{
            background-color:blue;
            overflow:hidden; /*不用添加div，添加该项依然可以实现保持背景颜色不变*/
        }
        .me1{
            width: 100px;
            height: 50px;
            color:gold;
            float:left;
            background-color: purple;
        }
        .me2{
            width: 100px;
            height: 50px;
            color:gold;
            float:left;
            background-color: #1ecc86;
        }
        .bottom{
            text-align: center;
            background-color: #c39;
        }
        /*.clear{*/
            /*clear: both;*/
        /*}*/
        /*使空标签占一整行*/
    </style>
</head>
<body>

<div class="outer">
    <div class="me1">menu1</div>
    <div class="me2">menu2</div>
    <!--<div class="clear"></div>-->

</div>

<div class="bottom">bottom</div>


</body>
</html>
posted @ 2020-01-10 20:06  Stary_tx  阅读(208)  评论(0)  编辑  收藏  举报