双飞翼布局

浮动： float
绝对定位和相对定位 ：position and relative
负边距： negative-margin

---

浮动

1）浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
2）由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。（w3c）
上面是官方的界定。我们可以用"float:left"和"float:right"来使元素块向左向右浮动。
3）当一个元素块被浮动后，其在原文档流中的空间被关闭，后面的内容会向前补充，这样很容易造成后面的元素包围了浮动的元素块。可以用clear方法来阻止行框包围元素块。

绝对定位和相对定位

1）我们通过position属性来声明这个元素块进行绝对定位或者相对定位。如果要进行定位的是行内元素，首先需要用display:block来将其声明为一个块级元素。
2）两者的区别为：
1>相对定位是相对于自身在文档流中的原有位置的起点为基准进行位移定位。其在文档流中的位置不会被关闭。
2>绝对定位是相对于最接近的已定位父元素的起点为基准，如果没有已定位的父元素，则为其最初的包含快，也就是body。绝对定位相对于相对定位的不同，是其在文档流中的元素框被关闭，该位置被后面的元素填充。

负边距

1）在css中，有两种边距，分别为内边距padding和外边距margin。内边距padding是元素内容与边框之间的距离，外边距margin为元素边框到父元素框外边距之间的距离。
2）内边距padding只能设置为正值，而外边距margin可以设置为正值也可以设置为负值。
3）元素的背景是可以占用内边距padding距离的。

---

1、

<div class="container">
	<div class="middle">
		dfgdsfgfddddddddddddddddddddddddd
		ddddddddddddddddddddddddddddddddd
		ddddddddddddddddddddddddddddddd我来
		了史蒂芬孙的方式地方都是福斯的我来了史蒂芬孙的方式
		地方都是福斯的我来了史蒂芬孙的方式地方都是福斯的我
	</div>
	<div class="left"></div>
	<div class="right"></div>
</div>

2、

.container{
	height: 500px;
	border: 1px solid;
}
.middle{
	height: 500px;
	width: 100%;
	background-color: yellowgreen;
}
.left{
	height: 500px;
	width: 200px;
	background-color: deepskyblue;
}
.right{
	height: 500px;
	width: 200px;
	background-color: grey;
}

/* 2 /
.middle{
float: left;
}
.left{
float: left;
}
.right{
float: left;
}
/ 3 /
.left{
margin-left: -100%;
}
.right{
margin-left: -200px;
}
/ 4 /
.container{
padding: 0 200px;
}
/ 5 */
.left{
position: relative;
left: -200px;
}
.right{
position: relative;
left: 200px;
}

f

.container{
min-width: 200px;
}
/* 6 */
.middle{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}

3、

4、

5、

6、

7、