应用于 html 文件后 Float 属性不起作用？

问题描述

我正在尝试将导航菜单设为左侧垂直菜单。但它并没有变成垂直菜单，它看起来像这样：

选择器链接到 HTML 文件中正确的 id 和标签。

下面我附上了 CSS 文件。导致浮动属性在我的页面上无法正常工作的潜在问题是什么。

* {

    margin:0;
}

body {

    text-align: center;
    background-color: #f4e1d2;  /*change the the background color of the entire page*/
    font-family: papyrus,copperplate,serif;
}
#nav {   /*navigation menu*/

    background-color: #f18973;
    height: 80px;
    /*display:flex;
    align-items: center;*/

}
header {
    padding: 2.5%; 
    text-align: center;
    background-color:#bc5a45;
}

h1 {

    margin-bottom: 3%;
    margin-top: 5%;
    color: #bc5a45;
    font-size: calc(2px + 2vw);
}

h2 {

    margin-top: 3%;
    margin-bottom: 1%;
    color: #bc5a45;
    font-size: calc(5px + 1vw);
    
}

h3 {

    color: #bc5a45; 
    font-size: calc(1px + 1vw);
}

#nav li {
   
    padding-left: 25px;
    
    color: white;
   
}


ul { 
    
    font-size: calc(1px + 1vw);
    
   
}
ol {

    width: 15%;
    margin: auto;
    color: #f18973
}

p {

   color: #f18973; 
   width: 60%;
   margin: auto;
   font-size: calc(1px + 1vw);

}

video { 
   
    margin: 1%;
}

img {
    margin: 1%;
}



footer {

    background-color: #b2b2b2;
    clear: both;
}

header h1 {
    color: white;
    letter-spacing:5px;
    font-size:calc(10px + 2vw);
    margin-bottom: 10px;
}

header p {

    margin-top: 10px;
    color:white;
    
    
}

a:link {

    color: white;
}

#page-wrapper {  /*wrap the entire body tag*/

    float:left;
    width:100%;
    Box-sizing:border-Box;
}


#main-content { /*wrap the main content*/

    width:75%;
    float:left;
    Box-sizing:border-Box;
}



#nav {

  float:left;
  width: 25%;
  Box-sizing: border-Box;  
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

css-float html