【CSS】三列布局（左右div固定宽度，中间div随浏览器窗⼝
⾃适应变化宽度）
以前在⽹上看到过，说这个问题是⼀道经典的笔试/⾯试题。当时在百度⾯试的时候果然就遇到过。昨天在兰亭的时候果然⼜遇到了。其实，这个题⽬确实考到了Css⼏个⽅⾯的很重要的基础知识。⾸先考到了定位中的⽅法中的⽂档流和浮动流，然后考到了⽂档流和浮动流默认宽度和显⽰层级（我⼀般理解成index这种含义，或者画布中的上下层⼀样，浮动流会居于上层，⽂档流会居于下层，因此浮动流区块可能会部分遮住⽂档流区块，但是⽂档流在下⾯是依然存在的，只是被遮住了⽽已）。
⾸先写出两个div，让第⼀个div左浮动，第⼆个div右浮动，第三个div直接以⽂档流去定位。由于第⼀个和第⼆个div是浮动流定位，所以会脱离⽂档流，并且第⼀个div会浮动到⽗容器区域的左边，第⼆个div会浮动到⽗容器的右边，在⼀排中显⽰。这时候第三个div由于是⽂档流定位的，且如果不设宽度或默认成100%，会随着浏览器窗⼝变化宽度的，因此前⾯两个浮动流区块会部分遮住此⽂档流区块，这时只⽤对此区块设置左右margin即可。
<!DOCTYPE html>css固定定位
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>⽆标题⽂档</title>
<style type='text/css'>
* {
margin: 0;
padding: 0;
}
#left {
width: 100px;
float: left;
background: green;
height: 300px;
overflow: hidden;
}
#right {
width: 100px;
float: right;
background: red;
height: 300px;
overflow: hidden;
}
#middle {
margin-right: 110px;
margin-left: 110px;
height: 300px;
background: #ccc;
}
</style>
</head>
<body>
<div id="left">
</div>
<div id="right">
</div>
<div id="middle">
</div>
</body>
</html>
⾃⼰试了好⼏次，但是右边 div 总是另起⼀⾏排列，后来发现原来 html 中要先列出 left 和 right 再列 middle。原因：尚未搞懂。总结⼀下，两种⽅法实现该效果：
1.左右浮动，中间正常⽂档流。
2.左右绝对定位，中间正常⽂档流。