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">
        <h1>浮动解决方案</h1>
        1.这是三栏布局中间部分
      </div>
    </article>
  </section>

2.absolute绝对定位

<section class="layout absolute">
  <style>
    .layout.absolute .left-center-right>div{
      position: absolute;
    }
    .layout.absolute .left{
      left: 0;
      width: 300px;
      background: red;
    }
    .layout.absolute .center{
      left: 300px;
      right: 300px;
      background: yellow;
    }
    .layout.absolute .right{
      right: 0px;
      width: 300px;
      background: blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h2>绝对定位</h2>
      1.这是三栏布局绝对定位的中间部分
    </div>
    <div class="right"></div>
  </article>
</section>

3.flex弹性盒子

<section class="layout flexbox">
  <style>
    .layout.flexbox{
      margin-top: 140px;
    }
    .layout.flexbox .left-center-right{
      display: flex;
    }
    .layout.flexbox .left{
      width: 300px;
      background: red;
    }
    .layout.flexbox .center{
      flex: 1;
      background:yellow;
    }
    .layout.flexbox .right{
      width: 300px;
      background: blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h3>flexbox解决方案</h3>
      1.这是三栏布局flexbox中间部分
    </div>
    <div class="right"></div>
  </article>
</section>

4.table表格布局

<section class="layout table">
  <style>
    .layout.table .left-center-right{
      width: 100%;
      display: table;
      height: 100px;
    }
    .layout.table .left-center-right>div{
      display: table-cell;
    }
    .layout.table .left{
      width: 300px;
      background: red;
    }
    .layout.table .center{
      background: yellow;
    }
    .layout.table .right{
      width: 300px;
      background: blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h2>表格布局</h2>
      1.这是三栏布局表格布局的中间部分
    </div>
    <div class="right"></div>
  </article>
</section>

5.grid网格布局 / 栅格化布局

<section class="layout grid">
  <style>
    .layout.grid .left-center-right{
      display: grid;
      width: 100%;
      grid-template-rows: 100px;
      grid-template-columns: 300px auto 300px;
    }
    .layout.grid .left{
      background: red;
    }
    .layout.grid .center{
      background: yellow;
    }
    .layout.grid .right{
      background: blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h2>网格布局解决方案</h2>
      1.这是三栏布局网格布局的中间部分
    </div>
    <div class="right"></div>
  </article>
</section>

页面实现效果

五种布局的优缺点比较

五种布局的浏览器兼容性

扩展考虑：

若高度已知这个条件去掉，即同时考虑纵向和横向，哪种布局不再适用？

• 增加高度之后，如下图所示：

  

• 因此，同时考虑纵向横向的情况下，float布局、absolute布局、grid布局不能使用

• 浮动为何左右超出？中间内容超出之后，左侧没有遮挡物，会向左浮动。

• 如何解决？创建BFC