最近面试经常被问，那就赶紧做了一个总结在这里
两栏布局（左侧固定宽度为200px，右侧自适应）
<body>
<div class='wrap'>
<div class='left'>左侧固定内容</div>
<div class='right'>右侧自适应</div>
</div>
</body>
1.使用浮动-float
/*清除浏览器默认设置的边距*/
* {
padding: 0;
margin: 0;
}
.wrap {
overflow: hidden;
border: 1px solid red;
}
/*脱离文档流*/
.left {
float: left; //左边元素向左浮动
width: 200px;
height: 200px;
background: pink;
}
.right {
height: 200px;
background: skyblue;
}
注：使用float会使元素脱离文档流，这样会导致两个div发生重叠，而在.wrap中设置overflow: hidden是为了触发BFC，清除浮动（不会重叠）。
2.使用绝对定位-absolute
/*清除浏览器默认设置的边距*/
* {
padding: 0;
margin: 0;
}
.wrap {
overflow: hidden;
position: relative;
border: 1px solid red;
}
/*脱离文档流*/
.left {
position: absolute; // 绝对定位
left: 0;
right: 0;
width: 200px;
height: 200px;
background: pink;
}
.right {
margin-left: 200px; // 设置左边距和左边元素等宽
height: 200px;
background: skyblue;
}
注：这个实现方案要注意的是.right中设置margin-left: 200px，这里的200px是左边元素的宽。
3.使用弹性布局-flex
/*清除浏览器默认设置的边距*/
* {
padding: 0;
margin: 0;
}
.wrap {
display: flex; // 弹性布局
border: 1px solid red;
}
.left {
flex: 0 0 200px; // 左边元素不扩大不缩小，默认宽度为200px
height: 200px;
background: purple;
}
.right {
flex: 1; // 右边元素扩大，自动填充过多空间
height: 200px;
background: skyblue;
}
注：flex属性要在子元素上设置。flex属性是flex-grow（增长比例）和flex-shrink（缩小比例）和flex-basis（默认大小）的缩写。
4.使用表格布局-table
/*清除浏览器默认设置的边距*/
* {
padding: 0;
margin: 0;
}
.wrap {
display: table; // 表格布局
border: 1px solid red;
width: 100%;
}
.left {
display:table-cell; //设置这个元素为表单中的单元格
height: 200px;
width： 200px;
background: purple;
}
.right {
display:table-cell; //设置这个元素为表单中的单元格
height: 200px;
background: skyblue;
}
注：表格布局按照我的理解是将父元素设置成一个表格，里面的元素都是一个一个单元格，可以设置几行几列，所以这个方法也可以实现三栏布局（一行三列）；可以设置行高列高。
5.使用网格布局-grid
/*清除浏览器默认设置的边距*/
* {
padding: 0;
margin: 0;
}
.wrap {
display:grid; // 网格布局
grid-template-rows: 200px; // 设置行高
grid-template-columns: 200px auto; // 设置列宽
border: 1px solid red;
}
.left {
background: purple;
}
.right {
background: skyblue;
}
注：grid布局真的太方便啦！！但是放在这里好像有点大材小用了
6.使用calc()函数
/*清除浏览器默认设置的边距*/
* {
padding: 0;
margin: 0;
}
.wrap {
overflow: hidden;
border: 1px solid red;
}
.left {
float: left;
background: purple;
height: 200px;
width: 200px;
}
.right {
background: skyblue;
height: 200px;
width: calc( 100% -200px )
}
注：cala()函数能动态计算出宽度
