在網頁布局中，以前只考慮了兩列、三列的布局方式，但是沒有過多的去考慮在兩列、三列布局的情況下實現某些自適應的情況；今天遇到這個問題，在這里mark一下；
方法一：左側元素浮動或者絕對定位的方式脫離文檔流，讓兩個塊級元素能夠在同一行顯示。然后margin-left的值設置為左側元素的寬度；在這里利用了div的一個默認規則，div沒有設置寬度的情況下會繼承父元素的寬度；如果用p等其他標簽達不到此效果；
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> </head> <style type="text/css"> .box1{float: left;width: 300px;height: 150px;background: red;} .box2{margin-left: 300px;background: blue;height: 150px;} </style> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
效果圖：
方法二：利用BFC（塊級格式化上下文）來防止蚊子環繞的原理來實現；BFC就是一個相對獨立的布局環境，它內部元素的布局不受外面布局的影響，它可以通過多種方式來創建：
1.float不為none；
2.position不為static或者relative；
3.display為table-cell，table-caption，inline-block，flex或者inline-flex中的其中一個都可；
4.overflow不為visible；
關於BFC，W3C等資料是這樣描述的：在BFC中，每個盒子的左外邊框緊挨着包含塊的左邊框（從右到左的格式化時，則為右邊框緊挨）。即使在浮動里也是這樣的（盡管一個包含塊的邊框會因為浮動而萎縮），除非這個包含塊的內部創建了一個新的BFC。這樣，當我們給右側的元素單獨創建一個BFC時，它將不會緊貼在包含塊的左邊框，而是緊貼在左邊框的右邊框；
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> </head> <style type="text/css"> .box1{float: left;width: 300px;height: 150px;background: red;} .box2{background: yellow;height: 150px;overflow: auto;} </style> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
效果：
注：在測試過程中遇到一個問題，去掉box2的overflow：auto；屬性，右側的div也能達到自適應的效果。自適應的盒子是否需要在設置BFC還有待更一步確認；
方法三：利用display:table;的方式實現；父元素設置display:table;寬度100%，左右盒子設置display:table-cell;，左側固定的盒子設置寬高，右側自適應的盒子設置高度即可；
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> </head> <style type="text/css"> .box{display: table;width: 100%;} .box1{width: 300px;height: 150px;background: red;display: table-cell;} .box2{background: green;height: 150px;display: table-cell;} </style> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>
效果：
