Dynamic Drive 家的排版 Trick（ Dynamic Drive CSS Layouts）

[raincious]

这里面有一些利用 BFC 的 Trick ，能够让你更方便的控制 页面的主要内容 在一个分栏页面代码中的位置。

比如，你有一个两栏的页面，容纳主要内容的 Main Block 是自动大小的， Side Block 是固定大小的。而同时你希望让主要的内容最先进行加载（位于代码中靠前的位置）以便 SEO 。这时候就不能简单将 Side Block 放在 Main Block 之前然后使用 float 来进行排版了，而需要用到这些 Trick 。

原来以为自己已经记住了这些 Trick 的写法，经过时间的考验之后，果然还是很顺利的忘了。然后搜了下好像没有人特别分享过这个页面的内容。于是，页面在：

http://www.dynamicdrive.com/style/layouts/

总结了下，方法大致是这样：

如果你想要有一个两拦页面，首先需要一个容器#main，在其中定义一个占满全宽的#main-body，然后让这个#main-body float: left。

接着，在#main-body中定义一个#main-body-content，这是你主要页面的容器。在这个容器上定义margin-right: 200px，向右边让出一段距离给#main-body-side。

最后，再在#main下定义一个#main-body-side，然后让它float: left; width: 200px。这样能保证他有 200px 的宽度（刚#main-body-content让出的距离），然后再margin-left: -200px，因为#main-body是满宽的，所以要拉回来。

代码就像：

#main { overflow: auto; }
#main-body { float: left; width: 100%; }
#main-body-content { margin-right: 200px; }
#main-side { float: left; width: 200px; margin-left: -200px; }

然后如果你改主意了，想要 Side Block 在左边怎么办？

但这个时候，只需要将#main-body-content让出的方向换成左边，然后再将#main-side拉到最左边就可以了。代码就像：

#main-body-content { margin-left: 200px; }
#main-side { float: left; width: 200px; margin-left: 100%; }

会分两拦之后，三拦应该也不在话下了嗯（就是让#main-body-content同时让出两边嗯）。

// 这样的布局方式貌似前端们应该都滚瓜烂熟了吧，好像 早先 Wordpress 等的默认模板就是这样排版的。

// 勘误或者有更好的方法请跟帖告知哈。