实现左边div固定宽度，右边div自适应撑满剩下的宽度的布局方式

html:

<div class="container">
　　<div class="left">
　　　　left固定宽度200px
　　</div>
　　<div class="right">
可变宽度rightrightrightrightrightrightrightrightri
　　</div>
</div>

方式一：利用bfc

.left {
  width:200px;
  float:left;
  background:red;
}
.right {
  overflow:hidden;
  background:blue;
}

右边盒子触发bfc，使其不与浮动盒子区域重叠，因此会重新计算宽度。

 左边的浮动元素可以不设置具体宽度，配合margin-right和overflow：hidden。右边依旧可以自适应

于是，我们可能就会有：

.float-left {
    float: left; margin-right: 20px; 
}
.bfc-content {
    overflow: hidden; background-color: #beceeb;
}

的自适应固定搭配。再配合CSS样式库的 margin和 padding家族，快速布局可谓所向披靡。

方式二：左浮动+margin-left

.left {
  width:200px;
  float:left;
  border: 2px solid blue;
  background:red;
}

.right {
  border: 2px solid yellow;
  margin-left:200px;
  background:blue;
}

方式三：flex布局

.container {
  display:flex;/*设为伸缩容器*/ 
}

.left {
  width:200px;
  border: 2px solid blue;
  background:red;
}

.right {
  border: 2px solid yellow;
  flex:1;/*这里设置为占比1，填充满剩余空间*/ 
  background:blue;
}

flex详解请参考： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$

方式四：浮动+display:table-cell

display:table-cell 让元素表现得像单元格一样，IE8+以上浏览器才支持。跟display:inline-block一样，会跟随内部元素的宽度显示，看样子也是不合适的命。但是，单元格有个非常神奇的特性，就是你宽度值设置地再大，大到西伯利亚，实际宽度也不会超过表格容器的宽度。

因此，如果我们把display:table-cell这个BFC元素宽度设置很大，比方说3000像素。那其实就跟block水平元素自动适应容器空间效果一模一样了。除非你的容器宽度超过3000像素，实际上，一般web页面不会有3000像素宽的模块的。所以，要是你实在不放心，设个9999像素值好了！

.float-left {
    float: left;
}
.bfc-content {
    display: table-cell; width: 9999px;
}

看上去，好像还不错。但是，还是有两点制约，一是IE8+以上浏览器兼容，有些苦逼的团队还要管IE6；二是应付连续英文字符换行有些吃力（可以用word-break:break-all解决）。但是，总体来看，适用的场景要比overflow:hidden广博很多。

转自：https://www.cnblogs.com/yzhihao/p/6513022.html