CSS实现三栏布局（左边固定、右边固定、中间自适应）的五种方式
一、float布局
代码：
float布局
文字文字文字文字
经过测试发现当中间区域高度小于左右区域任一高度时效果是正常的，但当高度大于左右两边高度时就会出现如下情况，如下图：
这种情况要怎么解决呢？有两种方法可以解决：
（1）在中间区域设置margin-left和margin-right，本示例中只要设置左右间距为200px就可以完美解决
（2）在中间区域设置overflow: hidden（原因是：overflow: hidden可以触发bfc（bfc：块级格式化上下文），渲染规则：bfc里计算高度时，浮动的元素也参与计算）
这里特别提醒由于我们使用了float, 所以为了不影响其他元素的显示这里需要清除浮动,清除浮动的方式有很多大家可以自行搜索使用我这里使用伪元素的方式
.main::after{
content:'';
display: block;
clear: both;
}
二、Position布局:
代码：
position布局
文字文字文字文字
三、table布局:
table是一种常见的布局方式,他可以将整个页面按照表格的方式设置为多行多列,但是由于书写table标签比较麻烦尤其是涉及到table内嵌table的时候，所以CSS给我们提供了display: table的方式可以让让们方便的使用table布局, 设置子元素为列的属性为display:table-cell
display:table相当于 代码： flex布局是W3C提出了一种新的方案，可以简便、完整、响应式地实现各种页面布局。 当给元素设置display:flex，则该元素就是一个flex容器,其子元素就是容器成员,称之为flex项目,每个项目默认按照从左到右方式排列。 代码： 网格它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。 将属性 gird提供了 gird-template-columns、grid-template-rows属性让我们设置行和列的高、宽 代码：，display:table-cell，就相当于
四、弹性(flex)布局:
五、网格(gird)布局:
display 值设为 grid 或 inline-grid 就创建了一个网格容器，所有容器直接子结点自动成为网格项目。
相关