详情：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布局优点，是第一个基于二维方向的布局模块。它是第一个基于网格的原生布局系统。缺点是对低版本浏览器兼容性不好。