html:
<div class="container">
<div class="left">
left固定寬度200px
</div>
<div class="right">
可變寬度rightrightrightrightrightrightrightrightri
</div>
</div>
方式一：利用bfc
.left{
width:200px;
float:left;
background:red;
}
.right{
overflow:hidden;
background:blue;
}
右邊盒子觸發bfc，使其不與浮動盒子區域重疊，因此會重新計算寬度。
左邊的浮動元素可以不設置具體寬度，配合margin-right和overflow：hidden。右邊依舊可以自適應
於是，我們可能就會有：
.float-left { float: left; margin-right: 20px; } .bfc-content { overflow: hidden; background-color: #beceeb; }
的自適應固定搭配。再配合CSS樣式庫的margin和padding家族，快速布局可謂所向披靡。
方式二：左浮動+margin-left
.left{
width:200px;
float:left;
border: 2px solid blue;
background:red;
}
.right{
border: 2px solid yellow;
margin-left:200px;
background:blue;
}
方式三：flex布局
.container{
display:flex;/*設為伸縮容器*/
}
.left{
width:200px;
border: 2px solid blue;
background:red;
}
.right{
border: 2px solid yellow;
flex:1;/*這里設置為占比1，填充滿剩余空間*/
background:blue;
}
方式四：浮動+display:table-cell
display:table-cell 讓元素表現得像單元格一樣，IE8+以上瀏覽器才支持。跟display:inline-block一樣，會跟隨內部元素的寬度顯示，看樣子也是不合適的命。但是，單元格有個非常神奇的特性，就是你寬度值設置地再大，大到西伯利亞，實際寬度也不會超過表格容器的寬度。
因此，如果我們把display:table-cell這個BFC元素寬度設置很大，比方說3000像素。那其實就跟block水平元素自動適應容器空間效果一模一樣了。除非你的容器寬度超過3000像素，實際上，一般web頁面不會有3000像素寬的模塊的。所以，要是你實在不放心，設個9999像素值好了！
.float-left {
float: left;
}
.bfc-content {
display: table-cell; width: 9999px;
}
看上去，好像還不錯。但是，還是有兩點制約，一是IE8+以上瀏覽器兼容，有些苦逼的團隊還要管IE6；二是應付連續英文字符換行有些吃力（可以用word-break:break-all解決）。但是，總體來看，適用的場景要比overflow:hidden廣博很多。