css實現左邊div自適應寬度，右邊寬度適應左邊

利用bfc：右邊盒子觸發bfc，使其不與浮動盒子區域重疊，因此會重新計算寬度。

<style>
    .box{ width: 900px; margin: 0 auto; background-color: #eee; }
    .left{ min-width: 200px; float: left; background-color: yellow; height: 60px;}
    .bfc { background-color: green; }
    .right{ display: inline-block; margin-left: 20px; background-color: red;  height: 60px;}
</style>
<div class="box">
    <div class="left">
        我是自適應寬度盒子，min-width:200px 
    </div>
    <div class="bfc">
        <div class="right">
            我是自適應寬度，鋪滿剩下寬度
        </div>
    </div>
</div>

效果如圖

 

補充一下：

　　BFC翻譯過來是塊級格式化上下文，和haslayout比較相似，但haslayout是舊版本IE下的一個專有屬性，表示元素自己對自身的內容進行組織和計算。BFC相當於一個獨立的渲染單元，內外元素不會相互影響。我這里overflow:hidden觸發BFC，利用的是BFC布局的一條特性，就是BFC的區域不會與浮動盒子重疊。BFC有很多特性，也有很多觸發方式，感興趣的同學可以google深入了解下