BFC(Block Formatting Context)是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流。摘自W3C：浮动，绝对定位元素，inline-blocks, table-cells, table-captions,和overflow的值不为visible的元素，（除了这个值已经被传到了视口的时候）将创建一个新的块级格式化上下文。上面的引述几乎总结了一个BFC是怎样形成的。但是让我们以另一种方式来重新定义以便能更好的去理解。

随着CSS的发展，使用CSS有语义化的命名约定和CSS层的分离，将有助于它的可扩展性，性能的提高和代码的组织管理。在我前面的文章中讨论很多关于CSS的问题都可以通过使用一个适当的CSS策略来避免。在这篇文章里，我将着重于讨论使用一种方法或者一个命名规则所带来的好处。这里有很多可供使用的前端方法和命名规则，每个都有自己的优缺点。在几乎所有的案例中CSS被分割成更易于管理的代码“块”。CSS的这种分割方式定义了每一种方法。

自Hybrid Mobile技术发展以来，Web开发者转到移动开发的人数大大增加了。Hybrid Mobile开发技术使得一个Web开发者能够去开发一个运行在多个平台上的移动应用。完全不用去学习相应的平台语言和使用已经存在的技术。Hybrid Mobile技术已经发展了很多，有很多不同类型的平台存在，比如说PhoneGap和Titanium。一个值得考虑的Hybrid Mobile开发新平台就是Ionic。

Bootstrap和Foundation是我最喜欢的两个前端框架，尤其是在快速开发网站的原型上。它们都提供了随时可用的组件，加快了我的工作流程。除了一些细小差别，在我看来它们大部分的基本特征都是类似。在这篇文章里，我将介绍它们网格的基本构造。首先，我将会向你展示它们是如何构建的，描述它们的主要部件，以及它们对不同屏幕的大小表现出的差异。然后，我将通过一个真实例子的实践来帮助你增添知识。

在我之前的一篇文章里，我比较了一下Foundation 5 和 Bootstrap 3的栅格系统。然而这一次，我将继续深入到Foundation的基础栅格结构。这就是说，我将给你展示如何利用它预建立的Sass mixins来做出更多语义化栅格。为了说明它，我将重建上述文章中的demo页面。首先，请先让我介绍一下在这篇文章将要使用到的项目。