web中flex布局与float布局

１.flex布局

<style>
    .nav {
      overflow: hidden;
      background-color: #78df6a; /* 设置导航栏背景颜色 */
    }
    
    .nav a {
      float: left;
      display: block;
      text-align: center;
      padding: 18px 20px;
      text-decoration: none;
      color: #000000; /* 设置导航栏文字颜色 */
    }
    
    .nav a:hover {
      background-color: #2179c7; /* 设置鼠标悬停时的背景颜色 */
    }
  </style>
  
  <div class="nav">
    <a href="#">首页</a>
    <a href="#">关于</a>
    <a href="#">服务</a>
    <a href="#">联系我们</a>
    <a href="#">邮箱地址</a>
  </div>

运行结果

 ２.float布局

<style>
    .nav {
      display: flex;
      background-color: #FFDAB9; /* 设置导航栏背景颜色 */
    }
    
    .nav a {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px 20px;
      text-decoration: none;
      color: #555555; /* 设置导航栏文字颜色 */
    }
    
    .nav a:hover {
      background-color: #90EE90; /* 设置鼠标悬停时的背景颜色 */
    }
  </style>
   
  <div class="nav">
    <a href="#">首页</a>
    <a href="#">关于</a>
    <a href="#">服务</a>
    <a href="#">联系我们</a>
    <a href="#">邮箱地址</a>
  </div>

运行结果