老师，我的主导航显示有问题，为什么topbar、main-nav用::after清除浮动不起作用呢

老师，我的主导航显示有问题，为什么topbar、main-nav用::after清除浮动不起作用呢

<!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>慕云游商城 - 机票、酒店、旅游</title>
    <meta name="Keywords" content="机票，酒店，旅游攻略，签证，出过，自由行">
    <meta name="Description" content="慕云网商城">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/css.css">
</head>
<body>
    <header class="site-head">
        <div class="topbar">
            <div class="center-wrap">
                <nav class="shortcut-links">
                    <ul>
                        <li>
                            <a href="">目的地</a>
                        </li>
                        <li>
                            <a href="">锦囊</a>
                        </li>
                        <li class="have-menu">
                            <a href="">社区</a>
                            <em class="arrow">
                                <i></i>
                                <b></b>
                            </em>
                            <div class="menu sqmenu">
                                <ul class="menu-list">
                                    <li><a href="">旅行论坛</a></li>
                                    <li><a href="">旅行专栏</a></li>
                                    <li><a href="">旅行问答</a></li>
                                    <li><a href="">旅行生活分享平台</a></li>
                                    <li><a href="">JNE旅行生活美学</a></li>
                                    <li><a href="">Biu伴(原结伴同游)</a></li>
                                    <li><a href="">负责任的旅行</a></li>
                                    <li><a href="">特别策划</a></li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href="">行程助手</a>
                        </li>
                        <li class="have-menu">
                            <a href="">商城</a>
                            <em class="arrow">
                                <i></i>
                                <b></b>
                            </em>
                            <div class="menu scmenu">
                                <ul class="menu-list">
                                    <li><a href="">酒店自由行</a></li>
                                    <li><a href="">当地玩乐</a></li>
                                    <li><a href="">签证</a></li>
                                    <li><a href="">保险</a></li>
                                    <li><a href="">责车自驾</a></li>
                                    <li><a href="">邮轮</a></li>
                                    <li><a href="">河轮</a></li>
                                    <li><a href="">私人订制</a></li>
                                    <li><a href="">欧洲铁路</a></li>
                                </ul>
                            </div>
                        </li>
                        <li class="have-menu">
                            <a href="">酒店·民宿</a>
                            <em class="arrow">
                                <i></i>
                                <b></b>
                            </em>
                            <div class="menu jdmsmenu">
                                <ul class="menu-list">
                                    <li><a href="">酒店</a></li>
                                    <li><a href="">爱彼迎</a></li>
                                    <li><a href="">华人旅馆</a></li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href="">特价酒店</a>
                        </li>
                    </ul>
                </nav>
                <div class="topbar-r">
                    <a href="" class="iconfont">&#xe62d;</a>
                    <span>|</span>
                    <a href="" class="iconfont">&#xe6a1;</a>
                    <a href="" class="iconfont">&#xe635;</a>
                    <a href="" class="iconfont">&#xe660;</a>
                    <a href="">登录</a>
                    <a href="">注册</a>
                </div>
            </div>
        </div>
        <!-- <div class="clear"></div> -->
        <nav class="main-nav">
            <div class="center-wrap">
                <ul>
                    <li class="have-menu"><a href="">机酒自由行</a></li>
                    <li><a href="">优惠机票</a></li>
                    <li class="have-menu"><a href="">跟团游</a></li>
                    <li><a href="">酒店</a></li>
                    <li class="have-menu"><a href="">当地玩乐</a></li>
                    <li><a href="">签证</a></li>
                    <li><a href="">游轮</a></li>
                    <li><a href="">河轮</a></li>
                    <li><a href="">保险</a></li>
                    <li><a href="">租车自驾</a></li>
                    <li class="have-menu"><a href="">深度旅游</a></li>
                    <li><a href="">私人订制</a></li>
                </ul>
            </div>
        </nav>
        <!-- 页面顶部主要内容 -->
        <div class="header-con">
            <div class="center-wrap">
                <h1>慕云游商城</h1>
                <div class="search-box">
                    <input type="text" placeholder="查询目的地/酒店/机票攻略"><a class="btn iconfont" href="">&#xe62d;</a>
                </div>
                    
            </div>
        </div>
    </header>
</body>
</html>

.site-head {
    min-width: 1152px;
    height: 150px;
}

/* 顶部 */
.site-head .topbar {
    height: 32px;
    background: #2A2A2A;
    line-height: 32px;
}
.site-head .topbar::after {
    content: '';
    display: block;
    clear: both;
}
.site-head .topbar .center-wrap .shortcut-links {
    float: left;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li {
    float: left;
    margin-right: 18px;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li a {
    color: white;
    font-size: 14px;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu {
    padding-right: 12px;
    position: relative;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    top: 50%;
    margin-top: -6px;
    right: 0px;
    transition: transform .2s ease 0s ;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu:hover .arrow {
    transform:rotate(180deg)
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .arrow i {
    position: absolute;
    top: 2px;
    left: 3px;
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    background-color: white;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .arrow b {
    position: absolute;
    top: 0.5px;
    left: 3px;
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    background-color: #2A2A2A;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .menu {
    position: absolute;
    top: 30px;
    left: 0;
    background-color: white;
    z-index: 99;
    display: none;
    padding: 10px;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .menu .menu-list li {
    height: 20px;
    line-height: 20px;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .menu a{
    color: #2A2A2A;
    font-size: 12px;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .sqmenu {
    width: 110px;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .scmenu {
    width: 80px;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .jdmsmenu {
    width: 80px;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu:hover .menu {
    display: block;
}
.site-head .topbar .center-wrap .topbar-r {
    width: 225px;
    float: right;
}
.site-head .topbar .center-wrap .topbar-r a ,
.site-head .topbar .center-wrap .topbar-r span {
    color: white;
    margin-right: 11px;
    font-size: 14px;
}
.clear {
    clear: both;
    height: 0;
    width: 100%;
}
/* 主导航 */
.site-head .main-nav {
    height: 40px;
    background-color: #20BD9A;
}
.site-head .main-nav::after {
    content: '';
    display: block;
    clear: both;
}
.site-head .main-nav .center-wrap > ul > li {
    float: left;
    margin-right: 18px;
    line-height: 40px;
}
.site-head .main-nav .center-wrap > ul > li a {
    color: white;
    font-size: 16px;
}
.site-head .main-nav .center-wrap > ul > li.have-menu {
    padding-right: 16px;
    position: relative;
}
.site-head .main-nav .center-wrap > ul > li.have-menu::before {
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    top:18px;
    right: 0;
    border: 6px solid transparent;
    border-bottom: none;
    border-top-color: white;
    transition: transform 0.2s ease 0s;
}
.site-head .main-nav .center-wrap > ul > li.have-menu:hover::before {
    transform: rotate(180deg);
}
/* 头部主内容 */
.site-head .header-con {
    height: 36px;
    padding: 21px 0;
}
.site-head .header-con h1 {
    float: left;
    color: #20BD9A;
    font-size: 24px;
    line-height: 36px;
    font-weight: bold;
}
.site-head .header-con .search-box{
    float: left;
    margin-left: 20px;
    width: 405px;
    padding-top: 2px;
}
.site-head .header-con .search-box input{
    float: left;
    width: 361px;
    height: 28px;
    border: 1px solid #20BD9A;
    border-radius: 4px 0 0 4px;
    font-size: 12px;
    outline: none;
    padding-left: 10px;
}
.site-head .header-con .search-box .btn {
    float: left;
    width: 32px;
    height: 30px;
    background-color: #20BD9A;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    color: white;
    border-radius: 0 4px 4px 0;
}
慕无忌8554725 2022-10-25
源自：“仿穷游”首页静态项目   2-7 使用CSS制作菜单
7
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

1回答
imooc_慕慕 回答被采纳获得+3积分 2022-10-26 10:26:22

同学你好，解析如下：

需要清除浮动的元素选择错误，应该是topbar盒子中的center-wrap元素

https://img1.sycdn.imooc.com//climg/63589a750913722a04590181.jpg

main-nav盒子中的center-wrap元素

https://img1.sycdn.imooc.com//climg/6358e2dd09dcf3a003940238.jpg

https://img1.sycdn.imooc.com//climg/63589acc092b3a8c11140212.jpg

祝学习愉快~


0
收起回答
  • 慕无忌8554725 提问者 #1
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    .site-head {
        min-width: 1152px;
        height: 150px;
    }
     
    /* 顶部 */
    .site-head .topbar {
        height: 32px;
        background: #2A2A2A;
        line-height: 32px;
        min-width: 1152px;
    }
    .site-head .topbar .center-wrap .shortcut-links {
        float: left;
    }
    .site-head .topbar .center-wrap::after {
        content: '';
        display: block;
        clear: both;
    }
    .site-head .topbar .center-wrap .shortcut-links > ul > li {
        float: left;
        margin-right: 18px;
    }
    .site-head .topbar .center-wrap .shortcut-links > ul > li a {
        color: white;
        font-size: 14px;
    }
    .site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu {
        padding-right: 12px;
        position: relative;
    }
    .site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .arrow {
        position: absolute;
        width: 12px;
        height: 12px;
        top: 50%;
        margin-top: -6px;
        right: 0px;
        transition: transform .2s ease 0s ;
    }
    .site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu:hover .arrow {
        transform:rotate(180deg)
    }
    .site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .arrow i {
        position: absolute;
        top: 2px;
        left: 3px;
        width: 6px;
        height: 6px;
        transform: rotate(45deg);
        background-color: white;
    }
    .site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .arrow b {
        position: absolute;
        top: 0.5px;
        left: 3px;
        width: 6px;
        height: 6px;
        transform: rotate(45deg);
        background-color: #2A2A2A;
    }
    .site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .menu {
        position: absolute;
        top: 30px;
        left: 0;
        background-color: white;
        z-index: 99;
        display: none;
        padding: 10px;
    }
    .site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .menu .menu-list li {
        height: 20px;
        line-height: 20px;
    }
    .site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .menu a{
        color: #2A2A2A;
        font-size: 12px;
    }
    .site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .sqmenu {
        width: 110px;
    }
    .site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .scmenu {
        width: 80px;
    }
    .site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .jdmsmenu {
        width: 80px;
    }
    .site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu:hover .menu {
        display: block;
    }
    .site-head .topbar .center-wrap .topbar-r {
        width: 225px;
        float: right;
    }
    .site-head .topbar .center-wrap .topbar-r a ,
    .site-head .topbar .center-wrap .topbar-r span {
        color: white;
        margin-right: 11px;
        font-size: 14px;
    }
    .clear {
        clear: both;
        height: 0;
        width: 100%;
    }
    /* 主导航 */
    .site-head .main-nav {
        height: 40px;
        background-color: #20BD9A;
        min-width: 1152px;
    }
    .site-head .main-nav .center-wrap::after {
        content: '';
        display: block;
        clear: both;
    }
    .site-head .main-nav .center-wrap > ul > li {
        float: left;
        margin-right: 18px;
        line-height: 40px;
    }
    .site-head .main-nav .center-wrap > ul > li a {
        color: white;
        font-size: 16px;
    }
    .site-head .main-nav .center-wrap > ul > li.have-menu {
        padding-right: 16px;
        position: relative;
    }
    .site-head .main-nav .center-wrap > ul > li.have-menu::before {
        content: '';
        position: absolute;
        width: 0px;
        height: 0px;
        top:18px;
        right: 0;
        border: 6px solid transparent;
        border-bottom: none;
        border-top-color: white;
        transition: transform 0.2s ease 0s;
    }
    .site-head .main-nav .center-wrap > ul > li.have-menu:hover::before {
        transform: rotate(180deg);
    }
    /* 头部主内容 */
    .site-head .header-con {
        height: 36px;
        padding: 21px 0;
    }
    .site-head .header-con h1 {
        float: left;
        color: #20BD9A;
        font-size: 24px;
        line-height: 36px;
        font-weight: bold;
    }
    .site-head .header-con .search-box{
        float: left;
        margin-left: 20px;
        width: 405px;
        padding-top: 2px;
    }
    .site-head .header-con .search-box input{
        float: left;
        width: 361px;
        height: 28px;
        border: 1px solid #20BD9A;
        border-radius: 4px 0 0 4px;
        font-size: 12px;
        outline: none;
        padding-left: 10px;
    }
    .site-head .header-con .search-box .btn {
        float: left;
        width: 32px;
        height: 30px;
        background-color: #20BD9A;
        font-size: 16px;
        line-height: 30px;
        text-align: center;
        color: white;
        border-radius: 0 4px 4px 0;
    }

    老师，我css按照您说的改了，但还是没起效果呢？我发现给

    .site-head .topbar .center-wrap .shortcut-links > ul > li 里面加一个font-size: 14px;就好了，不知道为什么


    2022-10-26 11:00:45
  • 慕无忌8554725 提问者 #2

    63589a45293a43b806501000.jpg老师，为什么这里不是用的伪元素呢


    2022-10-26 11:06:00
  • imooc_慕慕 回复 提问者 慕无忌8554725 #3

    同学你好，分析如下：

    页面中默认的文字大小为16px，导致实际高度超出了设置的高度

    https://img1.sycdn.imooc.com//climg/6358aad0096779da05440192.jpg

    因此将字体设置为14px则不会超出高度，效果实现。

    祝学习愉快~

    2022-10-26 11:36:07
点开查看后面1条评论
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

老师，我的这个地方的位置上下间距怎么缩小？为什么视频中的没有出现我这个问题？
25 0 5
为什我用伪类清除浮动音量条就显示不正确呢？用clear:both就可以正常显示
11 0 3
请问5.1清除浮动章节内容中的浮动问题
27 0 3
清除浮动是什么意思
18 0 4
老师，关于浮动的问题，既然设置了浮动为什么要清除掉呢，直接把浮动删除不就好了吗？请问两者的区别
42 2 3

登录后可查看更多问答，登录/注册

前端工程师
  • 参与学习           人
  • 提交作业       15697    份
  • 解答问题       17883    个

入行前端，是明智的选择！市场需求大，就业前景好，入行门槛低，小白易上手 全新升级:技术更新,Vue3.0/TypeScript/React17.x; 技术更全面,从0基础到全栈开发再到大型项目构建

了解课程

本课精华内容

问答 作业

老师,请问vscode有哪些好用的插件推荐一下...

157 1

老师,API具体是指什么呢?

75 1

老师,这两种情况为什么得到的结果不一样?

31 2

没有思路

201 5

老师给点提示。

155 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师
插入代码