以前在網上看到過，說這個問題是一道經典的筆試/面試題。當時在百度面試的時候果然就遇到過。昨天在蘭亭的時候果然又遇到了。其實，這個題目確實考到了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>