页面布局常用的方法有浮动、定位、flex、grid网格布局、栅格系统布局
浮动：优点: 兼容性好。缺点:浮动会脱离标准文档流，因此要清除浮动。我们解决好这个问题即可。
绝对定位。优点: 快捷。缺点: 导致子元素也脱离了标准文档流，可实用性差。
flex 布局 (CSS3中出现的)。优点: 解决上面两个方法的不足，fex布局比较完美。移动端基本用 flex布局。
网格布局 (grid)。CSS3中引入的布局，很好用。代码量简化了很多。
利用网格布局实现的个左右300px中间自适应的布局：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>html * { padding: 0; margin: 0;}/* 重要：设置容器为网格布局，宽度为100% */.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: green;}.layout.grid .right { background: blue;}</style></head><body><section class="layout grid"><article class="left-center-right"> <div class="left">我是 left</div> <div class="center"> 我是 center <h1>网格布局解决方案</h1> </div> <div class="right">我是 right</div></article></section></body></html>