这个话题是@Rachel Andrew于2019年9月在英国爱丁堡举办的Finch front的一场演讲，其原标题是Does it work? Using the new CSS Layout，我在这里将其译为这些用于布局的新属性能用吗？。这个话题中的内容非常的有意思，其中有些内容在小站上也有过相应的介绍。今天看了该PPT，觉得有些内容还是非常的有意思，值得和大家分享。

把浮动放到今天来聊，可能很多小伙伴会觉得没有任何意义。会说“CSS都发展到这种程度了，Web的布局还会有谁用浮动呢”？那么真的是如此吗？浮动真的要退出CSS的舞台成为历史吗？我的答案是不可能的。不管CSS怎么发展，浮动都还有其存在的意义和作用，而且在一些场景中是离开不浮动的，最起码近几年之内是不可能的。至于为什么，请继续往下阅读。

经过CSS盒模型和视觉格式化模型两个章节中的学习，我们有了一个清晰的概念。即在CSS中插何一个元素都是一个盒子，甚至是文本节点也是一个盒子（匿名盒子）；都有自己的视觉格式化（不同的盒子）。而其中CSS的display属性又可以显式的修改每个盒子的视觉格式化模型，比如说从行内级盒子变成块级盒子。那在这一章节中，我们就来一起探讨CSS的display属性，该属性也是学习CSS不可或缺的属性之一。

Web自1989到今年刚好走过30年历程。30年来Web也发生了翻天覆地的变化，从事Web开发工作也衍生出多种工作岗位，而我们做为Web前端开发者的其中一员，更应该感谢Web给我们带来的机遇和未来。自从今天开始，我们来一起探讨Web开发中其中一小部分相关的技能（或者说知识），即Web布局。希望接下来的这个专栏对大家在今后的工作和学习上都会有所帮助。

在学习Web布局之前有一个非常重要的概念需要理解，这个概念就是盒模型。CSS盒模型是多个不同的CSS规则集合，定义了如何渲染Web页面。这一系列的不同的属性决定了HTML元素在页面上的位置。到目前为止，所有Web页面都只是一个接一个渲染的元素。可以说盒模型是我们定制默认布局方案的工具包。作为Web开发人员，大部分工作是将应用CSS盒模型中的规则将设计模型转换为Web页面（简单点说，就是UI还原）。接下来要介绍的CSS盒模型又被视为UI还原的重中之重，因为它定义了盒子的单独行为。特别是在以后的章节中，我们学习的各种布局都将会围绕着HTML的结构和CSS的盒模型一起来展开。

CSS视觉格式化模型（英文称之Visual Formatting Model），是CSS 2.2规范中的第九部分。该模型主要是用来处理和在视觉媒体上显示文档时使用的计算规则。仅从这一句来来描述，估计很多同学都会感到困惑，视觉格式化模型到底是什么鬼？大家先不用急着知道视觉格式化模型是什么，只需要知道它是CSS中很重要的一部分，如果理解了该部分所涉及到的知识点，将有助于你更好的理解和学习CSS，特别是布局。

在这一章节中我和大家将一起来探讨CSS中的另一个知识重点，即CSS的定位（position）和层叠控制（z-index）。这两个属性都隶属于CSS Positioned Layout Module Level 3模块。当人们在接触布局的时候都比较倾向于使用定位的方式。因为定位的概念看起来易于掌握。使用定位来布局，表面上你确切的指定了一个元素所处的位置，它坐落在那里。可事实上，定位要比你看到要稍微复杂一点。对于很多CSS的新手，CSS定位和层叠控制还是有些东西会被绊倒，所以在它们成为你惯用技巧前你需要先掌握它们。

到目前为止，Flexbox布局应该是目前最流行的布局方式之一了。而Flexbox布局的最大特性就是让Flex项目可伸缩，也就是让Flex项目的宽度和高度可以自动填充Flex容器剩余的空间或者缩小Flex项目适配Flex容器不足的宽度。而这一切都是依赖于Flexbox属性中的flex属性来完成。一个Flex容器会等比的按照各Flex项目的扩展比率分配Flex容器剩余空间，也会按照收缩比率来缩小各Flex项目，以免Flex项目溢出Flex容器。但其中Flex项目又是如何计算呢？他和扩展比率或收缩比率之间又存在什么关系呢？在这篇文章中我们将一起来探来。

整个Web在不断的演进，那么为Web服务的理念与技术等等也在不断的进行演化。那么我们今天要聊的话题，Web布局中最为优秀的两种布局方式：Flexbox布局和CSS Grid布局。有关于这两方面的知识，其实在W3cplus上已经有很多相关的内容。由于这两种布局方式对Web布局带来了很多改变，而且两者都有其自身的优势。正因为如此，很多同学总是会类似的一个问题：应该使用Flexbox还是Grid来进行布局？那么我们从这篇文章开始，将会分几篇文章一起来介绍Flexbox布局和CSS Grid布局两者的差异性？我们又应该如何的选择，才能更适合我们项目的布局？希望接下来的内容对大家有所帮助。

CSS Grid经过这么多年的发展已经越来越受人青眯了，到目前为止支持率得到近88%的比例。经过这么多年的跟踪和学习，对CSS Grid的特性也是略有所知，但还未达到完全的融汇贯通。因为它有很多的特性，而且这些特性对于CSSer来说很多都是新的概念，比如我们今天要说的分数单位fr就是一个新东东。那么这篇文章，咱们就来一起看看这个特性有什么特性，给我们又能带来什么好处。感兴趣的同学，请继续往下阅读。