CSS常见五种基本布局

常见五种布局方式：

• float浮动布局
• absolute绝对定位
• flex弹性盒子
• table表格布局
• grid网格布局 / 栅格化布局

五种布局方式基本实现方式

下面通过三栏式布局，已知高度，左右栏固定300px宽度，中间自适应为例，简单讲解五种布局。

• 公共样式如下：

<style media="screen">
    html *{
    
      padding: 0;
      margin: 0;
    }
    .layout{
    
      margin-top: 20px;
    }
    .layout article div{
    
      min-height: 100px;
    }
  </style>

1.float浮动布局

<section class="layout float">
    <style media="screen">
      .layout.float .left{
    
        float:left;
        width: 300px;
        background: red;
      }
      .layout.float .right{
    
        float: right;
        width: 300px;
        background: blue;
      }
      .layout.float .center{
    
        background: yellow;
      }
    </style>
    <article class="left-right-center">
      <div class="left"></div>
      <div class="right"></div>
      <div class="center