面试时遇到这样一个题，题目要求：分为左中右三列，左右两边固定宽度，均为200px；中间宽度自适应。当时没太明白，甚至把几个元素混为一谈了。得空了便来捋一捋。
我们先设这三块分别为left、middle、right。
1、浮动法（float与absolute区别在第二点）
浮动法的原理：
对左右块使用分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素在正常文档流中。
注意：
middle位置要求：middle块一定要放在left和right之后，因为它占据文档流位置，所以一定要放在最后
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三列自适应布局 浮动</title>
<style type="text/css">
#left,#right{ width: 200px;height: 200px; background-color: #ffe6b8 }
#left {float: left;} //左边块左浮动
#right{float: right;} //右边块右浮动
#middle{height: 200px; background-color: #a0b3d6;}
</style>
</head>
<body>
<div id="left">left</div>
<div id="right">right</div>
<div id="middle">middle</div> <!--注意middle块的位置，虽然写在right后面，但是在布局效果中出现在中间 -->
</div>
</body>
</html>
效果如下：
2、绝对定位
这种方法就是利用了绝对定位absolute，让左右两块脱离文档流，此时left和right与文档流无关，不占据空间。定位的元素和其他元素重叠。此处的left是叠在middle上的。
方法1和2的区别：
在CSS中也可以通过float或者position:absolute两种方法让元素脱离文档流。而这两者的表现实际上非常相似。简单的可以理解为部分无视和完全无视的区别：
使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置（即在文档流中占位置），环绕在周围(可以说是部分无视)。而对于使用position:absolute脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它(不占位置)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三列自适应布局 左右绝对定位absolute</title>
<style type="text/css">
*{
padding: 0;margin: 0;
}
#left{
width: 200px;
height: 200px;
background: yellow;
position: absolute;
top: 0;
left: 0; //注意这里
}
#middle{
height: 200px;
background: red;
text-align: center;
}
#right{
width: 200px;
height: 200px;
background: blue;
position: absolute;
top: 0;
right: 0; //注意这里
}
</style>
</head>
<body>
<div id="left">left</div>
<div id="middle">middle</div>
<div id="right">right</div>
</body>
</html>
3、marign负值法
该方法在网站布局中非常常见，也是面试常考点，优点是三栏相互关联，有一定的抗性。
要求：在middle外部再加一个div。此div需要设置float属性使其形成一个BFC（请自行百度点击跳转），并设置宽度，并且这个宽度要和left块的margin负值进行配合。看代码吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三列自适应布局 marign负值法</title>
<style type="text/css">
#div{
width: 100%;
height: 200px;
background: green;
float: left; /*记得是包含middle外层的div写啊*/
}
#middle{
height: 100%;
background: red;
}
#right,#left{
width: 200px;
height: 200px;
float: left; /*左右块浮动*/
}
#left{
background: yellow;
margin-left: -100%; /*-100%是因为相对来说它偏移到下一行去了*/
}
#right{
background: blue;
margin-left: -200px; /*这里的宽度一定要设置成等于负的包含middle的那个块的宽度*/
}
</style>
</head>
<body>
<div id="div">
<div id="middle">middle</div> <!-- middle必须放在最前面 -->
</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>
4. css3新属性flex方法
flex相关的请移步flex属性简介
写一个<`div>，在flex中类似于容器，
将left、right、middle全部包进去
并设div的display：flex。
middle块的样式中加上flex：1（或者auto）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三列自适应布局 css3新属性flex方法</title>
<style type="text/css">
#box{
width: 100%;
height: 200px;
display: flex;
}
#left,#right{
width: 200px;
height: 200px;
background: pink;
}
#middle{
flex: auto; /* flex属性是flex-grow（项目放大比例）, flex-shrink（缩小比例） 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选*/
background: skyblue;
}
</style>
</head>
<body>
<!-- 写一个的div包含left、right、middle，设置为display：flex；并将middle设置flex：1； -->
<div id="box">
<div id="left">left</div>
<div id="middle">middle </div>
<div id="right">right</div>
</div>
</body>
</html>
注：所有代码均完整，可直接使用，如需转载请注明出处