最近在學習web前端的知識，今天看IFE平臺上的開源題目的時候，遇到了一個問題（小白就是小白）TAT，問題實現很簡單，但由於自己基礎還沒打牢，半天解決不了，問題如標題所述，實現效果如圖：

要求：

用兩種不同的方式來實現一個三列布局，其中左側和右側的部分寬度固定，中間部分寬度隨瀏覽器寬度的變化而自適應變化

後來重新學習了下float浮動的相關知識，對此有了新的理解，發現前端不是那麼容易的TAT

主要參照了網上寫的比較好的博文，感覺很好理解：

下面是理解後個人感覺最舒服的寫法：

css程式碼如下

.left{
	width: 400px;
	height: 50px;
	background: red;
	float:left;
}

.middle{

	margin-right: 400px;
    margin-left: 400px;
    height: 50px;
    background: blue;
}
.right{
	width: 400px;
	height: 50px;
	float: right;
	background: yellow;
}
 

html程式碼：

<div class="left"> </div>
<div class="right"></div>
<div class="middle"></div>

	<div class="left"> </div>
	<div class="middle"></div>
	<div class="right"></div>

第一次寫的時候先寫了middle的div,而middle是正常的標準流中的內容，也就是沒有設定float屬性，也就是後面right對應div的上一個元素（middle對應的div）不是浮動的，因此right的頂部總是和上一個元素的底部對齊,實際效果是這樣的：

又仔細研讀了網上博文，終於改對了，感謝大佬！

個人覺得原博文中比較精髓的內容如下（原文中有標註）：

假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那麼A元素會跟隨在上一個元素的後邊(如果一行放不下這兩個元素，那麼A元素會被擠到下一行)；如果A元素上一個元素是標準流中的元素，那麼A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。

       div的順序是HTML程式碼中div的順序決定的。