三栏布局，中间自适应三栏布局，中间自适应

1.浮动
css

.left{ float: left; width: 300px; background: red; height: 100px; } .right{ float: right; width: 300px; background: pink; height: 100px; } .center{ background: yellow; height: 100px; }

dom

中间盒子放最后，不然占位了右边盒子就到下面去了
2.定位

.left{ position: absolute; left: 0; width: 300px; background: red; height: 100px; } .right{ position: absolute; right: 0; width: 300px; background: pink; height: 100px; } .center{ position: absolute; right: 300px; left: 300px; background: yellow; height: 100px; }

【三栏布局，中间自适应】中间的左右都要300px
3.flex

.father{ height: 100px; display: flex; } .left{ width: 300px; background: red; height: 100px; } .right{ width: 300px; background: pink; height: 100px; } .center{ flex: 1; background: yellow; height: 100px; }

4.table布局

.father{ height: 100px; display: table; width: 100%; } .father>div{ display: table-cell; } .left{ width: 300px; background: red; } .right{ width: 300px; background: pink; } .center{ background: yellow; }

table不要写错了
5.grid布局

.father{ height: 100px; display: grid; width: 100%; grid-template-rows:100px; grid-template-columns:300px auto 300px; }

子盒子都不用写样式
当内容超出高度时
只有flex和table布局可以自适应
浮动的会到左边，因为左边没有了浮动
定位的直接向下，因为设置了左右位置
grid是字超出，盒子不变
下面链接完美解释
https://blog.csdn.net/mrchengzp/article/details/78573208