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

这里面有一些利用 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 等的默认模板就是这样排版的。

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