利用BFC特性实现两栏自适应

有时候我们在CSS布局的时候需要实现两栏布局，且其中一栏的宽度不固定。据我的经验，有以下几种方法：

inline-block

首先两个元素不跨行，又要可以设置宽高，当然是inline-block，但是用此方法有个非常大的缺陷，就是width属性不好设置

• js计算
• 百分比计算
• calc属性

Float + overflowHidden

这种方式利用BFC特性

 

flex

具体看代码。