怎么清除ul浮动的影响


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>qq飞车</title>
    <style>
        *{padding: 0;margin: 0;}
        img{display: block;}
        header{height: 40px;width: 100%;}
        a{text-decoration: none;color: white;}
        ul,li{list-style: none;}
        .r{float: right;}
        .l{float: left;}
        .conta{width: 1080px;margin: 0 auto;}
        hgroup>a{float: left;display: block;width: 220px;height: 41px;}
        hgroup>a:first-child{background: url(./images/ost-bg.png) no-repeat 0 -38px;margin-right: 8px;}   
            hgroup>span{float: right;margin-left: 20px;line-height: 40px;
                background: url(./images/ost-bg.png) no-repeat;}  
            hgroup>span:first-child{    background-position: right -75px;padding-right: 18px;}
            hgroup>span:last-child{background-position:left -80px;padding-left: 20px;}
            main{background: url(./images/bg20190104.jpg) no-repeat;width: 100%;}
            main .main-list{height: 60px;background: rgb(44, 41, 41);opacity: .5;border: 1px skyblue solid;}
            main .main-list>ul>li{float: left;margin-left:40px;}
            main .main-list>ul>li a{display: block;height: 60px;margin-top: 10px;}
            main .main-list>ul>p {font-size:16px;font-weight: bold;margin-top:10px;}
            main .main-list>ul>li>span{font-size:10px;}
            main .main-list>ul>li>ul>li{color: rgb(240, 17, 17);opacity: 1;}
            .clear::after{content: "";display: block;clear:both;}
            .aa{background-color: red;}
    </style>
</head>
<body>
    <header >
        <div class="conta"> 
<hgroup class="l">
   <a href="#"></a>
   <a href="#"><img src="./images/ad.jpg" alt=""></a>
</hgroup>
<hgroup class="r">
<span>成长守护平台</span>
<span>腾讯游戏排行榜</span>
</hgroup>
        </div>  
    </header>
    <main class="clear">
<div class="main-list conta clear">
    <ul class="l clear">
        <li><a href="#"><p>首页</p><span>HOME</span></a></li>
        <li><a href="#"><p>游戏资料</p><span>GAME</span></a>
            <ul>
                <li>新手指导</li>
                <li>官方漫画<span>H</span></li>
                <li>飞车手游<i>N</i></li>
                <li>精美壁纸</li>
                <li>游戏下载</li>
            </ul>
        </li>
        <li><a href="#"><p>赛事中心</p><span>RACE</span></a>
            <ul>
                <li>SSC<span>H</span></li>
                <li>谁是车王</li>
                <li>全民争霸</li>
            </ul>
        </li>
        <li><a href="#"><p>活动中心</p><span>EVENT</span></a>
            <ul>
                <li>版本专区<span>H</span></li>
                <li>合作专区</li>
                <li>CDK兑换</li>
            </ul>
        </li>
    </ul><div class="aa   ">aaaaaaaaaaaaaaaaaaa</div>
    <div class="aa">aaaaaaaaaaaaaaaaaaa</div>
    <div class="aa">aaaaaaaaaaaaaaaaaaa</div>
</div>

    </main>
</body>
</html>

img

去掉ul的' l '类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>qq飞车</title>
    <style>
        *{padding: 0;margin: 0;}
        img{display: block;}
        header{height: 40px;width: 100%;}
        a{text-decoration: none;color: white;}
        ul,li{list-style: none;}
        .r{float: right;}
        .l{float: left;}
        .conta{width: 1080px;margin: 0 auto;}
        hgroup>a{float: left;display: block;width: 220px;height: 41px;}
        hgroup>a:first-child{background: url(./images/ost-bg.png) no-repeat 0 -38px;margin-right: 8px;}   
            hgroup>span{float: right;margin-left: 20px;line-height: 40px;
                background: url(./images/ost-bg.png) no-repeat;}  
            hgroup>span:first-child{    background-position: right -75px;padding-right: 18px;}
            hgroup>span:last-child{background-position:left -80px;padding-left: 20px;}
            main{background: url(./images/bg20190104.jpg) no-repeat;width: 100%;}
            main .main-list{height: 60px;background: rgb(44, 41, 41);opacity: .5;border: 1px skyblue solid;}
            main .main-list>ul>li{float: left;margin-left:40px;}
            main .main-list>ul>li a{display: block;height: 60px;margin-top: 10px;}
            main .main-list>ul>p {font-size:16px;font-weight: bold;margin-top:10px;}
            main .main-list>ul>li>span{font-size:10px;}
            main .main-list>ul>li>ul>li{color: rgb(240, 17, 17);opacity: 1;}
            .clear::after{content: "";display: block;clear:both;}
            .aa{background-color: red;}
    </style>
</head>
<body>
    <header >
        <div class="conta"> 
<hgroup class="l">
   <a href="#"></a>
   <a href="#"><img src="./images/ad.jpg" alt=""></a>
</hgroup>
<hgroup class="r">
<span>成长守护平台</span>
<span>腾讯游戏排行榜</span>
</hgroup>
        </div>  
    </header>
    <main class="clear">
<div class="main-list conta clear">
    <ul class="clear">
        <li><a href="#"><p>首页</p><span>HOME</span></a></li>
        <li><a href="#"><p>游戏资料</p><span>GAME</span></a>
            <ul>
                <li>新手指导</li>
                <li>官方漫画<span>H</span></li>
                <li>飞车手游<i>N</i></li>
                <li>精美壁纸</li>
                <li>游戏下载</li>
            </ul>
        </li>
        <li><a href="#"><p>赛事中心</p><span>RACE</span></a>
            <ul>
                <li>SSC<span>H</span></li>
                <li>谁是车王</li>
                <li>全民争霸</li>
            </ul>
        </li>
        <li><a href="#"><p>活动中心</p><span>EVENT</span></a>
            <ul>
                <li>版本专区<span>H</span></li>
                <li>合作专区</li>
                <li>CDK兑换</li>
            </ul>
        </li>
    </ul>
    <div class="aa   ">aaaaaaaaaaaaaaaaaaa</div>
    <div class="aa">aaaaaaaaaaaaaaaaaaa</div>
    <div class="aa">aaaaaaaaaaaaaaaaaaa</div>
</div>
    </main>
</body>
</html>

把l去了

img