以前在網上看到過，說這個問題是一道經典的筆試/面試題。當時在百度面試的時候果然就遇到過。昨天在蘭亭的時候果然又遇到了。其實，這個題目確實考到了Css幾個方面的很重要的基礎知識。首先考到了定位中的方法中的文檔流和浮動流，然後考到了文檔流和浮動流默認寬度和顯示層級（我一般理解成index這種含義，或者畫布中的上下層一樣，浮動流會居於上層，文檔流會居於下層，因此浮動流區塊可能會部分遮住文檔流區塊，但是文檔流在下面是依然存在的，只是被遮住了而已）。
首先寫出兩個div，讓第一個div左浮動，第二個div右浮動，第三個div直接以文檔流去定位。由於第一個和第二個div是浮動流定位，所以會脫離文檔流，並且第一個div會浮動到父容器區域的左邊，第二個div會浮動到父容器的右邊，在一排中顯示。這時候第三個div由於是文檔流定位的，且如果不設寬度或默認成100%，會隨着瀏覽器窗口變化寬度的，因此前面兩個浮動流區塊會部分遮住此文檔流區塊，這時只用對此區塊設置左右margin即可。
<!DOCTYPE html>
<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.左右絕對定位，中間正常文檔流。