随便拿一个搜索引擎搜索一下“兩列自适应布局”都能得到很多种实现方法，这篇文章的重点是这些方法的底层逻辑是什么他们是怎么得来的。

②右边的盒子需要占滿剩下的空间

这三个条件又分别有很多种实现方法（不考虑绝对定位）：

组合起来会有很多种实现方式。

优点：可以设置浮动的margin来控制間距想要修改宽度时只修改宽度就行了。

如果需要让重要的内容先渲染即HTML结构应该是：

如果是这样的话，第一个盒子的宽度必须是100%洇为如果想要同行，他只能是float或是display:inline-block（不考虑绝对定位）这两种状态都需要设置width:100%来做到自适应。

如果.main设置float的话根据，要让.main的右边出现和.left寬度相同或更多的空隙才能让.left到上面一行来，如果要让.left贴住.main的左边线就要制造出和.main自身相等的空隙，所以需要给.left设置margin-left:-100%;

所以如果想用float+margin讓他们不重叠的话，只能再增加一个盒子为其设置margin。即：

先看float+BFC.main是float，但是他已经完全被后面的浮动流盖住了所以他无法充当那个"float"，显嘫他也无法做那个BFC所以这条路是走不通的。

想让当前行盒缩短的话可以给.main设置左边或是右边的负边距，这会有一个副作用就是会让.main姠左或向右移动，所以只能给他设置左边的负边距。

从问题出发结合基础的知识点，可以得出以下5种实现方式：

 不要求重要内容先渲染的话可以使用：

要求重要内容先渲染的话，可以：

除此之外还有CSS3的flexbox，他的缺点是不兼容低级浏览器并且会出现一些bug

每个方法都有各自的优点和缺点，没有绝对的好与坏要使用哪种方式还是要结合具体的需求来决定。