[未解决问题][CSS]关于浮动

刺骨的言语ヽ痛彻心扉 2022-08-28 13:57 151阅读 0赞

最近在学习前端，在关于浮动的章节遇到一些问题，目前能力无法解决，记录下来

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6I-c5b6X5L2g5oOz5ZOt_size_20_color_FFFFFF_t_70_g_se_x_16]

## 问题描述： ##

前端开发、后端开发这俩的位置为什么会在这里

## HTML代码 ##

<!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>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="header-top w">
          
          <div class="logo">
            <img src="images/logo.png">
          </div>
          
          <div class="nav">
            <ul>
              <li><a href="#">首页</a></li>
              <li><a href="#">课程</a></li>
              <li><a href="#">职业规划</a></li>
            </ul>
          </div>
          
          <div class="search">
            <input type="text" value="请输入关键词">
            <button></button>
          </div>
          
          <div class="user">
            <img src="images/user.jpg" alt="" style="vertical-align:middle">
            lilei
          </div>
          
          <div class="banner">
            <div class="w">
              
              <div class="subnav">
                <ul>
                  <li><a href="#">前端开发<span>></span></a></li>
                  <li><a href="#">后端开发<span>></span></a></li>
                  <li><a href="#">移动开发<span>></span></a></li>
                  <li><a href="#">人工智能<span>></span></a></li>
                  <li><a href="#">商业预测<span>></span></a></li>
                  <li><a href="#">云计算&大数据<span>></span></a></li>
                  <li><a href="#">运维&测试<span>></span></a></li>
                  <li><a href="#">UI产品设计<span>></span></a></li>
                  <li><a href="#">产品<span>></span></a></li>
                </ul>
              </div>
              
              <div class="course">
                <div class="course-hd">
                  
                </div>
                <div class="course-bd">
    
                </div>
              </div>
            </div>
          </div>
        </div>
    </body>
    </html>

## CSS代码 ##

/* 清楚元素初始的内外边距 */
    *{
        
        margin: 0;
        padding: 0;
    }
    
    /* 清楚列表样式 */
    li{
        
        list-style: none;
    }
    
    /* 去掉button自带的边框 */
    button{
        
        border: none;
    }
    
    /* 说是方便写代码 */
    body{
        
        background-color: #f3f5f7;
        height: 3000px;
    }
    
    a{
        
        /*链接没有下划线*/
        text-decoration: none;
    }
    
    /* 清除浮动 */
    .clrerfix:before,
    .clrerfix:after{
        
        content: "";
        display: table;
    }
    .clearfix:after{
        
        clear:both;
    }
    .clearfix{
        
        *zoom:1;
    }
    
    .w{
        
        width: 1200px;
        margin: auto;
    }
    
    .header-top{
        
        height:42px;
        /* background-color: orange; */
        margin: 30px auto;
    }
    .logo{
        
        float: left;
        padding-left: 60px;
        /* background-color: orchid; */
    }
    
    .nav{
        
        float: left;
        /* background-color: palegoldenrod; */
    }
    
    .nav ul li{
        
        float: left;
    }
    
    .nav ul li a{
        
        display: block;
        height: 40px;
        padding: 0 10px;
        margin-left: 40px;
        line-height: 40px;
        font-size: 18px;
        color: #050505;
        text-decoration: none;
    }
    
    .nav ul li a:hover{
        
        border-bottom: 2px solid #00a4ff;
    }
    
    .search{
        
        float: left;
        
        margin-left: 70px;
        background-color: orange;
    }
    
    .search input{
        
        float: left;
        width: 340px;
        height: 40px;
        /* background-color: orange; */
        border: 1px solid #00a4ff;
        /* border-left: 0; */
        padding-left: 20px;
        color: #ccc;
    }
    
    .search button{
        
        float: left;
        width: 50px;
        height: 42px;
        background-image: url(images/btn.png);
    }
    
    .user{
        
        float: left;
        height: 42px;
        line-height: 42px;
        margin-left: 30px;
        font-size: 14px;
        color: #666;
    }
    
    /* .banner{
        height: 420px;
    	background: #1c036c url(images/banner2.jpg) no-repeat top center;
    } */

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6I-c5b6X5L2g5oOz5ZOt_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/cbe1c408b2b6446baf4be551d18020d4.png