两栏布局——实现左边固定，右边 自适应（右边固定，左边自适应）

今天上午，尝试了浮动、定位、calc三种方法来实现两栏布局的一边固定，一边自适应。遇到了各种各样的问题，但同时也收获了很多。下面详细讲解一种个人认为很简单又比较好理解的做法。

我们想要的效果如下图所示：

个人认为，一般情况下，这种布局中宽度固定的区域是侧边栏，而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧？下面是HTML结构：

 

CSS结构：

预览效果：

上面这种效果明显不是我们想要的。那么接下来分析怎么来实现？

1.首先我们要让下面黄色的部分跑上去，怎么才能跑上去？那么就需要上面红色的部分脱离正常的文档流，也就是设置浮动，比如现在为红色的设置左浮动；

CSS代码如下：

 预览效果如下图：

2.接下来我们要让黄色部分与红色的部分并排显示，也就是没有重叠。那么我们就要设置黄色的margin-left值（大于等于红色的宽度）；（或者为红色设置overflow:hidden）

CSS代码如下：

预览效果如下：

达到了我们想要的效果。

小结：首先为固定宽度的元素设置（左浮动或者有浮动——根据那边固定来定）；接下来为自适应元素设置（margin-left或者margin-right值——根据固定元素设置的左浮动或者右浮动来定）或者为其设置overflow:hidden。