定寬+單列自適應(yīng)布局可以有如下幾種方式：1、設(shè)置left元素float:left; 并設(shè)置right的margin-left尔当；該方法存在一個(gè)“bug”-當(dāng)right中子元素設(shè)置了清除浮動(dòng)后莲祸，right會(huì)整體下移。解決方法是椭迎，用一個(gè)container將right包裹起來(lái)锐帜，并設(shè)置container左浮動(dòng)，寬度為100%畜号，然后使用margin-left將容器上移缴阎。由于parent的兩個(gè)子元素都是浮動(dòng)元素，在浮動(dòng)元素內(nèi)部設(shè)置clear:both简软，不會(huì)影響外部布局蛮拔。由于right浮動(dòng)元素蓋在了left元素上述暂，導(dǎo)致無(wú)法選中l(wèi)eft元素中的文本，可以設(shè)置left元素position: relative提高其層級(jí)建炫。關(guān)于為何可以通過(guò)設(shè)置position:relative提高元素層級(jí)畦韭，參考張?chǎng)涡竦?a target="_blank" rel="nofollow">深入理解CSS中的層疊上下文和層疊順序。
2肛跌、設(shè)置left元素float:left; 設(shè)置right的overflow:hidden艺配。這里是利用了BFC（塊級(jí)格式化上下文），參考關(guān)于Block Formatting Context－－BFC和IE的hasLayout衍慎。簡(jiǎn)單來(lái)說(shuō)就是转唉，當(dāng)設(shè)置right的overflow:hidden后即生成了一個(gè)BFC，一個(gè)BFC就是頁(yè)面上的一個(gè)獨(dú)立容器稳捆，它不與外面的浮動(dòng)元素發(fā)生重疊酝掩，也即遇到浮動(dòng)元素后就會(huì)自動(dòng)收縮。打個(gè)比方就是眷柔，BFC就像是有內(nèi)涵又有點(diǎn)羞澀的漢子，float元素就像柔情似水的菇?jīng)鲈?dāng)某天BFC漢子碰到float妹子驯嘱，就會(huì)不由自主的縮起身子，與菇?jīng)霰３炙平墙木嚯x喳坠。如果float沒(méi)有設(shè)置margin-right鞠评，則默認(rèn)BFC與float是肩碰肩，所以壕鹉，如果float菇?jīng)鲇X(jué)得距離太近剃幌，可以設(shè)置其margin來(lái)控制與BFC漢子的距離。
3晾浴、使用table负乡，設(shè)置parent的display:table，并設(shè)置其寬度width: 100%; 然后設(shè)置left脊凰，right元素display: table-cell抖棘。當(dāng)給left設(shè)置寬度width: 80px后，right默認(rèn)寬度為table剩余寬度狸涌。由于table-cell是無(wú)法設(shè)置margin的切省，我們可以通過(guò)設(shè)置padding來(lái)為table-cell元素間保留空隙。為了提高渲染速度帕胆，我們還會(huì)給parent設(shè)置table-layout: fixed朝捆。
4、使用強(qiáng)大的flex懒豹。設(shè)置parent的display: flex;此時(shí)left芙盘，right變?yōu)閒lex-item驯用，他們的寬度與內(nèi)容自適應(yīng)。現(xiàn)在給left設(shè)置寬度width: 80px; 并設(shè)置其margin-right: 20px; 設(shè)置right的flex:1;后right占據(jù)flex元素剩余寬度何陆。由于flex自適應(yīng)內(nèi)容的靈活性晨汹，大范圍使用flex會(huì)影響瀏覽器性能，所以我們通常使用flex做一些小范圍的布局贷盲。
那么如何實(shí)現(xiàn)定寬(n)+自適應(yīng)呢淘这？方法與單列定寬+自適應(yīng)類似。
現(xiàn)在巩剖，我們來(lái)看看如何實(shí)現(xiàn)不定寬+自適應(yīng)铝穷。
不定寬+自適應(yīng)可以說(shuō)是定寬+自適應(yīng)的拓展，區(qū)別在于佳魔，不定寬元素的寬度可以改變曙聂。我們可以試著從定寬+自適應(yīng)的方法中尋找我們要的解決方法。我們的篩選條件是鞠鲜，自適應(yīng)元素（right）與定寬（left）元素的寬度無(wú)關(guān)宁脊，也就是說(shuō)，right元素可以自動(dòng)調(diào)整與left元素的舉例贤姆。上述4中方法中符合這個(gè)條件的分別是第2榆苞、3、4種方法霞捡。
方法2坐漏、float+overflow。設(shè)置left的float:left;使得left元素寬度自適應(yīng)碧信，right元素由于設(shè)置了overflow:hidden;默認(rèn)與left元素挨著而不重疊赊琳。left使用margin控制與right的距離。
方法3砰碴、設(shè)置parent的display: table;子元素display: table-cell;我們的目標(biāo)是left元素自適應(yīng)內(nèi)容寬度躏筏，right元素為table剩余寬度，那么如何實(shí)現(xiàn)呢衣式？我們可以將left的width設(shè)置得足夠小寸士，為0.1%，為什么是0.1%碴卧，而不是1px呢弱卡？這主要是出于在ie8中的兼容性考慮。然后我們給left里面的文本元素設(shè)置一個(gè)寬度住册，使得left中的內(nèi)容將left撐開婶博，由于left的寬度足夠小，所以right會(huì)占滿它所能占有的全部寬度荧飞。這里要注意凡人，不能給parent設(shè)置table-layout:fixed名党，因?yàn)檫@樣會(huì)使得布局固定，left無(wú)法被內(nèi)容撐開挠轴，right寬度近似為table寬度〈茫現(xiàn)在我們?cè)偬骄恳幌?strong>table-cell默認(rèn)寬度。若不給table下的table-cell設(shè)置寬度table-cell默認(rèn)寬度根據(jù)內(nèi)容平分岸晦，例如欧啤，如果left元素中內(nèi)容為字符“A”，right元素中內(nèi)容為字 符“B”启上，那么left與right的寬度相等邢隧，若left元素中內(nèi)容改為“AB”那么，left的寬度為right的兩倍冈在。當(dāng)給parent元素設(shè)置 table-layout: fixed后倒慧，table-cell元素的默認(rèn)寬度與內(nèi)容無(wú)關(guān)，而是固定的包券，若未給table-cell設(shè)置寬度纫谅，table-cell元素默認(rèn)平分 parent寬度。
方法4溅固、依舊是強(qiáng)大的flex系宜，flex-item默認(rèn)寬度為內(nèi)容寬度，只需給parent設(shè)置display: flex;然后right的flex: 1;即可使得right默認(rèn)填滿parent剩余空間发魄。
參考：網(wǎng)易前端微專業(yè)布局課程。

原文：http://www.huangruixuan.com/2016/04/01/%EF%BC%88%E4%B8%8D%EF%BC%89%E5%AE%9A%E5%AE%BD%E8%87%AA%E9%80%82%E5%BA%94%E5%B8%83%E5%B1%80/