如何通过CSS实现一个左边固定宽度、右边自适应的两列布局_html/css_WEB-ITnose

用两种不同的方法来实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化

个人总结出如下三种实现思路：

1. 通过绝对定位实现

See the Pen absolute-two-column by xal821792703 (@honoka) on CodePen.

注意点如下：

　　2. 通过浮动实现

See the Pen float-two-column by xal821792703 (@honoka) on CodePen.

注意点如下：

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 看看（笑）