浮动布局、圣杯布局、双飞翼布局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来实现两端留出空白的效果。且对整体不影响。

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