浮动布局、圣杯布局、双飞翼布局3种布局的代码与分析。

前一篇文章提到了margin的问题，如今已经翻篇。现在来弹一下布局，这个很重要。。

不多废话。一言不和上代码。

1.先看浮动布局

HTML

<pre name="code" class="html"><!-- 浮动布局 -->
<div class="screen">
	<article class="float">
		<section class="left">左边</section>
		<section class="right">右边</section>
		<section class="mid">
			<div class="content">
				中间(浮动布局)
			</div>
		</section>
	</article>
</div>

注意看这个左右与中间的位置，一会再观察后面布局的位置，这个区别后面说。 这里包括后面提到的的screen都是当body使用的，假设这个是bodyt的宽高，其宽度是300px,高度是200px，模拟整个浏览器屏幕。再看浮动布局样式

CSS

<span style="white-space:pre">		</span>.float{
			width: 300px;
			height: 200px;
			background: #999;
		}
		.float .mid{
			background: orange;
			width: 100%;
			height: 40px;
		}
		.float .content{
			margin: 0 70px;
			background: pink;
			text-align: center;
		}
		.float .left{
			float: left;
			width: 70px;
			height: 40px;
			background: red;
		}
		.float .right{
			float: right;
			width: 70px;
			height: 40px;
			background: green;
			text-align: right;
		}

效果如图

这个布局中用到的只是简单发浮动知识，注意中间粉色的，因为左右边盖住了其区域，可以选择对content的div加padding和margin解决。因为其宽度没有设置，所有加了padding与加了margin其盒子的内容区域大小不变160*18，加padding的盒子大小变为300*18，后者是160*18.（这里是正常盒子，怪异盒子读者可自行尝试。）

2.看圣杯布局，这个关于它的传说那在这里就不赘述，有兴趣的可以去百度，这里来看先来看他的

HTML

<div class="screen">
		<article class="cup">
			<section class="mid">
				<div class="content">
					中间(圣杯布局)
				</div>
			</section>
			<section class="left">左边</section>		
			<section class="right">右边</section>
		</article>
</div>

注意，与前面的浮动布局比较，有没有发现mid这个section飞上天和太阳肩并肩了。。。这样写，原因之一是，一般mid这个块中放到都是网页的重要部分，位置越靠前，就越先解析，这对用户而言是很重要的。其次是为了方便布局了。看他的

css

<pre name="code" class="css">.cup{
width: 300px;
height: 200px;
background: #999;
padding: 0 70px;
}
.cup .mid{
background: orange;
width: 100%;
height: 40px;
float: left;
}
.cup .content{
background: pink;
}
.cup .left{
float: left;
width: 70px;
height: 40px;
background: red;
margin-left: -100%;
position: relative;
left: -70px;
}
.cup .right{
float: left;
width: 70px;
height: 40px;
background: green;
text-align: right;
margin-left: -70px;
position: relative;
right: -70px;
}

然后再看看效果图。图中第二个框框。

额。。大家可能会说，你丫的四不四？上错图了吧？这没居中啊。。

但是这就是圣杯布局啊，我用在整个浏览器里它是完美的，可是用把他拎出来做小测试，它就不起作用了，我不知道是不是浏览器的左右壁硬一些。。撑不破。。总之，在整个浏览器中使用的时候，那个

padding: 0 70px; 

不会撑开浏览器，反而会挤压，让mid的两端各缩短70px，流出。。。70px的padding。

最后提到的双飞翼布局，堪称布局中的经典，基督教的圣经，佛教的金刚经。。。。咳咳，我只是想说它重要，废话忽视。。来，上代码

HTML

	<!-- 双飞翼布局 -->
	<div class="screen">
		<article class="fly">
	        <section class="mid">
	            <div class="content">
	                中间(双飞翼布局)
	            </div>
	        </section>
	        <section class="left">左边</section>
	        <section class="right">右边</section>
	    </article>
    </div>	

CSS

<span style="white-space:pre">		</span>.fly{
			width: 300px;
			height: 200px;
			background: #999;
		}
		.fly .mid{
			float: left;
			background: orange;
			width: 100%;
			height: 40px;
		}
		.fly .content{
			margin: 0 70px;
			background: pink;
		}
		.fly .left{
			float: left;
			width: 70px;
			height: 40px;
			background: red;
			margin-left: -100%;
		}
		.fly .right{
			float: left;
			width: 70px;
			height: 40px;
			background: green;
			margin-left: -70px;
			text-align: right;
		}

这个效果在图三中看出来了吧，其实这三个布局，在浏览器中效果相同。但是不同的舒爽。。。。谁用谁知懂啊。。。

这个里的布局跟圣杯布局比较一下。。。你会发现，少了定位。而这就是其比圣杯布局优秀的地方。它将relative去除了，然后新加了个content，使用content的margin来实现两端留出空白的效果。且对整体不影响。

至此，这三个布局就结束了。其他的多列布局，响应式布局，绝对定位布局可以自己去查查。。