常见的CSS页面布局方式

详情：CSS页面结构是我们日常生活中最常使用到的，当然目前可能大家用的最多的是elementUI实现布局，简单方柏霓，下面介绍几种常见的原生页面布局的方式

公共的样式部分

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .layout {
            margin-bottom: 20px;
        }

        .layout article {
            width: 100%;
        }

        .layout article>div {
            min-height: 100px;
        }

        .layout article .left {
            width: 300px;
            background: red;
        }

        .layout article .center {
            background: orange;
        }

        .layout article .right {
            width: 300px;
            background: blue;
        }
    </style>

1、float浮动布局方式

  <!-- 浮动布局 -->
  <section class="layout float">
    <style>
      .layout.float .left {
        float: left;
      }
      .layout.float .right {
        float: right;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">
        <h2>这是float布局</h2>
        <p>这是一段文字</p>
        <p>这是一段文字</p>
      </div>
    </article>
  </section>

2、absolute的布局方式

 <!-- 定位布局 -->
  <section class="layout absolute">
    <style>
      .layout.absolute .left-center-right > div {
        position: absolute;
      }
      .layout.absolute .left {
        left: 0;
      }
      .layout.absolute .center {
        left: 300px;
        right: 300px;
      }
      .layout.absolute .right {
        right: 0;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
        <h2>这是absolute布局</h2>
        <p>这是一段文字</p>
        <p>这是一段文字</p>
      </div>
      <div class="right"></div>
    </article>
  </section>

3、flex布局

  <!-- flex布局 -->
  <section class="layout flex">
    <style>
      .layout.flex {
        margin-top: 140px;
      }
      .layout.flex .left-center-right{
        display: flex;
      }
      .layout.flex .center {
        flex: 1;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
        <h2>这是flex布局</h2>
        <p>这是一段文字</p>
        <p>这是一段文字</p>
      </div>
      <div class="right"></div>
    </article>
  </section>

4、Grid布局方式

  <!-- grid布局 -->
  <section class="layout grid">
    <style>
      .layout.grid .left-center-right {
        display: grid;
        grid-template-columns: 300px auto 300px;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
        <h2>这是grid布局</h2>
        <p>这是一段文字</p>
        <p>这是一段文字</p>
      </div>
      <div class="right"></div>
    </article>
  </section>

效果图展示：

总结：
（1）float布局的兼容性比较好。缺点是如图二, 解决办法：给橙色块添加overflow: hidden（生成了一个BFC）。浮动元素父元素还存在高度塌陷问题，解决方法： 父元素生成一个BFC。
（2）absolute布局的有点是简单直接，兼容性好。缺点，脱离了文档流。
（3）flex布局的优点，布局简单、灵活，移动端友好；缺点是ie8以下不兼容。
（2）grid布局优点，是第一个基于二维方向的布局模块。它是第一个基于网格的原生布局系统。缺点是对低版本浏览器兼容性不好。