昨天和朋友模拟面试，然后嗯，超级不意外的发现自己的基础都特别不牢固，需要加强补习。其中问到了这一个简单常见的问题，我硬是憋了半天才想起来一种，可以用margin 和float。不用说这个和那啥居中啊啥的肯定也是有许多种方法的。结果果然没错，试着来几种方法。下面就记录下这几种方法。
第一种：就是我最开始想到的，左边利用float固定宽度，然后脱离文档流了之后，右边的就直接margin-left左边的宽度。
代码：
.left{float:left;width:600px;height:200px;background:red;}.right{margin-left:600px;height:200px;background:gold;}
<div class="left">这里有东西</div> /*这个浮动的只能放上面*/<div class="right">这里自适应</div>
第二种：算是第一种的改良版本，因为如果left和right的上下换个位置，因为浏览器的解析顺序，就会导致布局错误。然后就把两个都浮动好了，结合起来，这样位置就 可以随便放。
代码：
.contentall{margin-right:-600px;float:right;width:100%;}.content{margin-right:600px;background:rebeccapurple;height:200px;}.side{float:left;width:600px;background:green;height:200px;}
<div class="contentall"><div class="content">这里自适应</div> /*这里就是使得content的宽度就是屏幕的宽度减去固定宽度*/</div><div class="side">这是边边</div>
然后第三种：定位定位定位，感觉定位能解决好多问题emmm，其实原理还是让一个脱离文档流，一个设置一个margig。
代码：
.three{position:relative;left:0;top:0;}.cont{margin-left:600px;height:300px;background:greenyellow;}.sid{position:absolute;left:0;top:0;width:600px;height:300px;background:darkgoldenrod;}
<div class="three"><div class="cont">自适应</div><div class="sid">边边</div></div>
第四种第五种其实都差不多的原理：就是利用display：table，还有display:flex这两个自适应布局神器。（神器是我自定义的～）
第四种：代码：
.table{display:table;width:100%;}.table-cell1{display:table-cell;background:saddlebrown;height:500px;}.table-cell2{width:600px;height:500px;display:table-cell;background:lawngreen;}
<div class="table"><div class="table-cell2">边边</div><div class="table-cell1">自适应</div></div>
第五种：代码：
.parent{display:flex;}.side{width:600px;height:300px;background:blue;}.main{flex:1;height:300px;background:yellow;}
<div class="parent"><div class="side">边边</div><div class="main">自适应</div></div>
第六种：感觉之前一直没有想到，是利用BFC（块级格式化上下文）不与浮动的元素重叠的特性，这样就连margin也不需要了。
.bian{width:600px;height:400px;float:left;background:aqua;}.text{overflow:hidden; /*利用BFC不与浮动元素重叠的特性 */height:400px;background:blanchedalmond;}
<div class="bian">边边</div><div class="text">自适应</div>
OKOK又学到了～
