老师，我的主导航显示有问题，为什么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制作菜单
6
收起

正在回答

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

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 
    .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
请问老师我的代码写的怎样，需不需要再优化？导航项应该用浮动还是定位比较好？
0 0 3

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

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

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

了解课程

本课精华内容

问答 作业

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

157 1

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

75 1

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

31 2

没有思路

200 5

老师给点提示。

155 1

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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