HTML页面左右布局可以通过多种方式实现，其中最常见的方法是使用CSS的float属性、display: inline-block、flexbox布局和grid布局。以下是每种方法的简要说明：

1. 使用float属性：

   • 通过为左侧和右侧的元素设置float: left和float: right，可以实现左右布局。
   • 示例代码：
     html

     <div class="container">
       <div class="left">左侧内容</div>
       <div class="right">右侧内容</div>
     </div>
     <style>
       .container {
         overflow: hidden; /* 清除浮动 */
       }
       .left {
         float: left;
         width: 50%;
       }
       .right {
         float: right;
         width: 50%;
       }
     </style>

2. 使用display: inline-block：

   • 将左右两侧的元素设置为display: inline-block，并为其指定宽度，可以实现左右布局。
   • 示例代码：
     html

     <div class="container">
       <div class="left">左侧内容</div>
       <div class="right">右侧内容</div>
     </div>
     <style>
       .container {
         font-size: 0; /* 消除空白间距 */
       }
       .left, .right {
         display: inline-block;
         font-size: 16px; /* 恢复字体大小 */
         width: 50%;
       }
     </style>

3. 使用flexbox布局：

   • flexbox是一种强大的布局工具，通过设置父元素为display: flex，并使用justify-content: space-between等属性，可以轻松实现左右布局。
   • 示例代码：
     html

     <div class="container">
       <div class="left">左侧内容</div>
       <div class="right">右侧内容</div>
     </div>
     <style>
       .container {
         display: flex;
         justify-content: space-between;
       }
       .left, .right {
         flex: 1;
       }
     </style>

4. 使用grid布局：

   • grid布局允许你在二维网格中定位元素，通过设置父元素为display: grid，并定义网格模板列，可以实现左右布局。
   • 示例代码：
     html

     <div class="container">
       <div class="left">左侧内容</div>
       <div class="right">右侧内容</div>
     </div>
     <style>
       .container {
         display: grid;
         grid-template-columns: 1fr 1fr;
       }
     </style>

通过以上方法，你可以根据具体需求选择合适的方式来实现HTML页面的左右布局。每种方法都有其优缺点，flexbox和grid布局通常更灵活、更强大，而float和inline-block则更适合简单的布局需求。