1、第一种使用float、margin-left、position

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
  .left{
    height: 400px;
    width: 50%;
    background: blue;
    float:left;
    position:relative;
  }
  .right{
      height: 400px;
      width: 100%;
      background: red;
      float: right;
      margin-left: -50%;
   }
</style>
<div class="left"></div>
<div class="right"></div>

​ 左边的盒子带定位属性主要是为了始终处于右边盒子的上方，__因为有定位属性的元素始终处于没有定位属性的元素的上方__。上面这种方法要点在于float、position、margin-left，其中margin-left承担了很大的功能，margin-left属性值要和左浮动元素宽度一直，这样才能让两个元素处于同一排。

2、使用BFC的性质。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
   .black{
      	width:200px;
      	height:200px;
      	float:left;
	background:black;
     }
   .red{
      	width:200px;
      	height:300px;
      	overflow:hidden;
	background:red;
     }
</style>
<div class="black"></div>
<div class="red"></div>

上满的代码利用的BFC的一个特性：BFC区域不会与float重叠。红盒子在未加overflow:hidden之前，是处于黑盒子下方的，两者重叠；加了overflow:hidden后，由于红盒子处在了一个新的BFC区域中，BFC区域又不与float重叠，所以，两者就分开了，实现了两列布局。

3、使用flex布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
 .parent{
  	display:flex;
  }
 .black{
    flex:1;
    height:200px;
    float:left;
    background:black;
  }
 .red{
    flex:1;
    height:200px;
    background:red;
  }
</style>
<div class="parent">
	<div class="black"></div>
	<div class="red"></div>	
</div>

flex属性控制两部分的比例，两者的值相等，则在水平方向上平分。

flex可以参考下面的文章：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html