多种方法实现HTML两栏布局：浮动、定位、Flexbox与Grid

实现HTML两栏布局（通常是一侧固定宽度，另一侧自适应剩余空间）有多种方法。这里我将介绍几种常用的方法：

1. 浮动布局（Float Layout）

使用CSS的float属性可以实现两栏布局。通常，固定宽度的栏设置float: left;（或right），而自适应宽度的栏则放在其后，不设置float，从而自动填充剩余空间。


<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>两栏布局 - 浮动</title>  
<style>  
  .container {  
    overflow: hidden; /* 清除浮动 */  
  }  
  .sidebar {  
    float: left;  
    width: 200px;  
    background-color: #f0f0f0;  
  }  
  .main {  
    margin-left: 210px; /* 留出侧边栏的空间 */  
    background-color: #ddd;  
  }  
</style>  
</head>  
<body>  
<div class="container">  
  <div class="sidebar">侧边栏</div>  
  <div class="main">主内容区</div>  
</div>  
</body>  
</html>
<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>两栏布局 - 浮动</title>  
<style>  
  .container {  
    overflow: hidden; /* 清除浮动 */  
  }  
  .sidebar {  
    float: left;  
    width: 200px;  
    background-color: #f0f0f0;  
  }  
  .main {  
    margin-left: 210px; /* 留出侧边栏的空间 */  
    background-color: #ddd;  
  }  
</style>  
</head>  
<body>  
<div class="container">  
  <div class="sidebar">侧边栏</div>  
  <div class="main">主内容区</div>  
</div>  
</body>  
</html>
<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>两栏布局 - 浮动</title>  
<style>  
  .container {  
    overflow: hidden; /* 清除浮动 */  
  }  
  .sidebar {  
    float: left;  
    width: 200px;  
    background-color: #f0f0f0;  
  }  
  .main {  
    margin-left: 210px; /* 留出侧边栏的空间 */  
    background-color: #ddd;  
  }  
</style>  
</head>  
<body>  
<div class="container">  
  <div class="sidebar">侧边栏</div>  
  <div class="main">主内容区</div>  
</div>  
</body>  
</html>

2. 定位布局（Positioning Layout）

使用position属性也可以实现两栏布局。通常，固定宽度的栏使用position: absolute;定位，而自适应宽度的栏则使用margin或padding来留出空间。


<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>两栏布局 - 定位</title>  
<style>  
  .container {  
    position: relative;  
    padding-left: 210px; /* 留出侧边栏的空间 */  
  }  
  .sidebar {  
    position: absolute;  
    left: 0;  
    width: 200px;  
    background-color: #f0f0f0;  
  }  
  .main {  
    background-color: #ddd;  
  }  
</style>  
</head>  
<body>  
<div class="container">  
  <div class="sidebar">侧边栏</div>  
  <div class="main">主内容区</div>  
</div>  
</body>  
</html>
<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>两栏布局 - 定位</title>  
<style>  
  .container {  
    position: relative;  
    padding-left: 210px; /* 留出侧边栏的空间 */  
  }  
  .sidebar {  
    position: absolute;  
    left: 0;  
    width: 200px;  
    background-color: #f0f0f0;  
  }  
  .main {  
    background-color: #ddd;  
  }  
</style>  
</head>  
<body>  
<div class="container">  
  <div class="sidebar">侧边栏</div>  
  <div class="main">主内容区</div>  
</div>  
</body>  
</html>
<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>两栏布局 - 定位</title>  
<style>  
  .container {  
    position: relative;  
    padding-left: 210px; /* 留出侧边栏的空间 */  
  }  
  .sidebar {  
    position: absolute;  
    left: 0;  
    width: 200px;  
    background-color: #f0f0f0;  
  }  
  .main {  
    background-color: #ddd;  
  }  
</style>  
</head>  
<body>  
<div class="container">  
  <div class="sidebar">侧边栏</div>  
  <div class="main">主内容区</div>  
</div>  
</body>  
</html>

3. Flexbox布局（Flexbox Layout）

Flexbox是一种更现代、更灵活的布局方式，非常适合用于实现两栏布局。


<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>两栏布局 - Flexbox</title>  
<style>  
  .container {  
    display: flex;  
  }  
  .sidebar {  
    width: 200px;  
    background-color: #f0f0f0;  
  }  
  .main {  
    flex-grow: 1; /* 占据剩余空间 */  
    background-color: #ddd;  
  }  
</style>  
</head>  
<body>  
<div class="container">  
  <div class="sidebar">侧边栏</div>  
  <div class="main">主内容区</div>  
</div>  
</body>  
</html>
<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>两栏布局 - Flexbox</title>  
<style>  
  .container {  
    display: flex;  
  }  
  .sidebar {  
    width: 200px;  
    background-color: #f0f0f0;  
  }  
  .main {  
    flex-grow: 1; /* 占据剩余空间 */  
    background-color: #ddd;  
  }  
</style>  
</head>  
<body>  
<div class="container">  
  <div class="sidebar">侧边栏</div>  
  <div class="main">主内容区</div>  
</div>  
</body>  
</html>
<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>两栏布局 - Flexbox</title>  
<style>  
  .container {  
    display: flex;  
  }  
  .sidebar {  
    width: 200px;  
    background-color: #f0f0f0;  
  }  
  .main {  
    flex-grow: 1; /* 占据剩余空间 */  
    background-color: #ddd;  
  }  
</style>  
</head>  
<body>  
<div class="container">  
  <div class="sidebar">侧边栏</div>  
  <div class="main">主内容区</div>  
</div>  
</body>  
</html>

4. Grid布局（Grid Layout）

CSS Grid布局是另一种强大的布局系统，它允许你以二维网格的形式来布局元素。


<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>两栏布局 - Grid</title>  
<style>  
  .container {  
    display: grid;  
    grid-template-columns: 200px 1fr; /* 侧边栏固定宽度，主内容区自适应 */  
  }  
  .sidebar {  
    background-color: #f0f0f0;  
  }  
  .main {  
    background-color: #ddd;  
  }  
</style>  
</head>  
<body>  
<div class="container">  
  <div class="sidebar">侧边栏</div>  
  <div class="main">主内容区</div>  
</div>  
</body>  
</html>
<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>两栏布局 - Grid</title>  
<style>  
  .container {  
    display: grid;  
    grid-template-columns: 200px 1fr; /* 侧边栏固定宽度，主内容区自适应 */  
  }  
  .sidebar {  
    background-color: #f0f0f0;  
  }  
  .main {  
    background-color: #ddd;  
  }  
</style>  
</head>  
<body>  
<div class="container">  
  <div class="sidebar">侧边栏</div>  
  <div class="main">主内容区</div>  
</div>  
</body>  
</html>
<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>两栏布局 - Grid</title>  
<style>  
  .container {  
    display: grid;  
    grid-template-columns: 200px 1fr; /* 侧边栏固定宽度，主内容区自适应 */  
  }  
  .sidebar {  
    background-color: #f0f0f0;  
  }  
  .main {  
    background-color: #ddd;  
  }  
</style>  
</head>  
<body>  
<div class="container">  
  <div class="sidebar">侧边栏</div>  
  <div class="main">主内容区</div>  
</div>  
</body>  
</html>