最近在百度 ife 训练营中看见的一道题目：
用两种不同的方法来实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化 
个人总结出如下三种实现思路：
通过绝对定位实现 see the pen absolute-two-column by xal821792703 (@honoka) on codepen.
 注意点如下：
需要套一个“positioned”的父元素 div-a 绝对定位，并将位置调整为浏览器左上角 div-b margin-left 属性值为 div-a 的宽度（因为 div-a 绝对定位已经脱离文档流，故不设定为 div-a 宽度的话，会相互覆盖） div-c 绝对定位并将位置调整为正下方 需要自适应的 div 均设定宽度为100%  2. 通过浮动实现
see the pen float-two-column by xal821792703 (@honoka) on codepen.
注意点如下：
div-a 设定为左浮动 div-b 与上面一样需要将 margin-left 属性值设为 div-a 的宽度，原因同上，浮动也会脱离文档流 div-c 最好清除浮动，避免浮动的影响 3. 通过 bfc 规则实现
see the pen bfc-two-column by xal821792703 (@honoka) on codepen.
此处便不花大量篇幅介绍 bfc 了，可以参见下面两篇博文：
深入理解bfc和margin collapse 
css之bfc详解
简而言之，bfc 可以帮助我们解决布局中左边元素脱离文档流后，右边元素的左外边距会触碰到包含块容器的左外边框的问题，就像下图：
现在我们仅需注意将 div-b 设定为 bfc 元素即可。
以上便是个人总结出的三种两列布局方法，欢迎交流。
另外如果对百度 ife 前端训练营感兴趣，欢迎来我的 repo 看看（笑）