今天做了一個練習，要求用兩種方法來實現左側寬度固定、右側寬度自適應的兩列布局。一開始我以為會很簡單，畢竟只是練習，但是我寫出了一種方法之后卻沒能順利的寫出第二種方法。對於網上的一些解決方法我還是不太滿意，於是自己繼續琢磨着，問問一些前輩，希望得到一些思路。終於，皇天不負有心人，在自己翻譯的一篇關於BFC的文章上，我找到了解決的方法。
關於左側寬度固定，右側寬度自適應兩列布局的一種很常用的方法我相信大家都知道。就是利用左側元素浮動，或者絕對定位的方式使其脫離常規文檔流，讓兩個塊級元素能夠在同一行顯示。然后右側元素 margin-left 的值等於左側元素寬度，這時右側元素將緊挨着左側元素，由於塊元素的寬度會自動默認充滿剩下的屏幕，所以就實現了右側自適應的效果了。
HTML代碼如下：
<!DOCTYPE> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="test.css" type="text/css"> </head> <body> <div class="one"></div> <div class="two">第一種方法</div> </body> </html>
CSS代碼如下：
.one { position: absolute; height: 100px; width: 300px; background-color: blue; } .two { height: 200px; margin-left: 300px; background-color: red; }
瀏覽器上輸出效果：
第二種方法，我利用的是創建一個新的BFC（塊級格式化上下文）來防止文字環繞的原理來實現的。BFC就是一個相對獨立的布局環境，它內部元素的布局不受外面布局的影響。它可以通過以下任何一種方式來創建：
float的值不為noneposition的值不為static或者relativedisplay的值為table-cell,table-caption,inline-block,flex, 或者inline-flex中的其中一個overflow的值不為visible
關於BFC，在w3c里是這樣描述的：在BFC中，每個盒子的左外邊框緊挨着包含塊的左邊框（從右到左的格式化時，則為右邊框緊挨）。即使在浮動里也是這樣的（盡管一個包含塊的邊框會因為浮動而萎縮），除非這個包含塊的內部創建了一個新的BFC。這樣，當我們給右側的元素單獨創建一個BFC時，它將不會緊貼在包含塊的左邊框，而是緊貼在左元素的右邊框。
HTML代碼：
<!DOCTYPE> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="test.css" type="text/css"> </head> <body> <div class="one"></div> <div class="two">第二種方法</div> </body> </html>
CSS代碼：
.one { float: left; height: 100px; width: 300px; background-color: blue; } .two { overflow: auto; height: 200px; background-color: red; }
瀏覽器輸出效果：
以上僅是個人一些想法，大家還有更好的方法可以說出來一起學習學習。如果我有什么講得不對的地方歡迎大家指正，謝謝大家。