CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。
主要布局技术有：
- 浮动
- 定位
- CSS 表格
- 弹性盒子
- 网格
正常布局流
正常布局流中，HTML 元素完全按照源码中出现的先后次序显示。
布局技术会覆盖默认的布局行为：
position属性：正常布局流中，默认为static，使用其它值会引起元素不同的布局方式，例如将元素固定到浏览器视口的左上角。- 浮动：应用
float值，诸如left能够让块级元素互相并排成一行，而不是一个堆叠在另一个上面。 display属性：标准值block,inline或inline-block会改变元素在正常布局流中的行为方式。
浮动
浮动技术允许元素浮动到另外一个元素的左侧或右侧，而不是默认的一个堆叠另一个。float 的主要用途是布置出多个列并且浮动文字以环绕图片。
float 属性有四个可能的值：
left— 将元素浮动到左侧。right— 将元素浮动到右侧。none— 默认值, 不浮动。inherit— 继承父元素的浮动属性。
清除浮动
关于浮动带来的问题：所有在浮动下面的自身不浮动的内容都将围绕浮动元素进行包装，如果没有处理这些元素，就会变得很糟糕。
幸运的是，有一种简单的方法可以解决这个问题—— clear 属性。当你把这个应用到一个元素上时，它主要意味着”此处停止浮动”——这个元素和源码中后面的元素将不浮动，除非您稍后将一个新的 float 声明应用到此后的另一个元素。
浮动问题
浮动的元素存在于正常的文档布局流之外，在某些方面的行为相当奇怪：
- 首先，他们在父元素中所占的面积的有效高度为0。这个可以通过很多方式解决，但是我们所依赖的是在父容器的底部清除浮动，如我们在我们的当前示例所做的那样。 如果检查当前示例中正文的高度，您应该看它的高度是行为本身。
- 其次，非浮动元素的外边距不能用于它们和浮动元素之间来创建空间。
- 还有一些关于浮动的奇怪的事情——Chris Coyier优秀的关于 Floats 的文章概述了浮动的使用以及问题的修复。
定位
定位技术（Position）允许我们将一个元素从它在页面的原始位置准确地移动到另外一个位置。
定位类型有四种：
- 静态定位（Static Positioning）是每个元素默认的属性——它表示“将元素放在文档布局流的默认位置——没有什么特殊的地方”。
- 相对定位（Relative Positioning）允许我们相对元素在正常的文档流中的位置移动它——包括将两个元素叠放在页面上。这对于微调和精准设计(design pinpointing)非常有用。
- 绝对定位（Absolute Positioning）将元素完全从页面的正常布局流中移出，类似将它单独放在一个图层中. 我们可以将元素相对于页面的 元素边缘固定，或者相对于离元素最近的被定位的祖先元素（ancestor element）。绝对定位在创建复杂布局效果时非常有用，例如通过标签显示和隐藏的内容面板或者通过按钮控制滑动到屏幕中的信息面板.
- 固定定位（Fixed Positioning）与绝对定位非常类似，除了它是将一个元素相对浏览器视口固定，而不是相对另外一个元素。 在创建类似页面滚动总是处于页面上方的导航菜单时非常有用。
静态定位
静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置 ——这里没有什么特别的。静态定位是默认行为！
相对定位
它与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。
绝对定位
绝对定位带来了非常不同的结果。
绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。这是非常有用的：这意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能 。例如，弹出信息框和控制菜单；翻转面板；可以在页面上的任何地方拖放的UI功能……
定位上下文
哪个元素是绝对定位元素的“包含元素”？ 默认情况下，它是<html>元素——定位的元素是被嵌套在<body>中的HTML源代码，这更准确地称为元素的定位上下文。
我们可以改变定位上下文——绝对定位的元素相对于其定位的元素。 这是通过在元素的其他祖先之一上设置定位（position 属性）来实现的。
z-index
网页也有一个 z 轴：一条从屏幕表面到你的脸（或者在屏幕前面你喜欢的任何其他东西）的虚线。z-index 值影响定位元素位于该轴上的位置；正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有 z-index 为auto，实际上为0。
固定定位
还有一种类型的定位覆盖——fixed。 这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于 <html> 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目，如持久导航菜单。
粘性定位
盒位置根据正常流计算（这称为正常流动中的位置），然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。
CSS表格
在浏览器中支持基本的CSS之前——web开发人员过去也常常使用表格来完成整个网页布局——将它们的页眉、页脚、不同的列等等放在不同的表行和列中。这在当时是有效的，但它有很多问题——表布局是不灵活的，非常重的标记，难以调试和语义上的错误（比如，屏幕阅读器用户在导航表布局方面有问题）。
CSS表格的存在是为了让您能够像表格一样布局元素，而不需要上面描述的任何问题——这听起来可能有些奇怪，您应该使用表格元素作为表格数据，但有时这可能是有用的。例如，您可能想要列出一个表单，其中有标签和文本输入；这可能很棘手，但是CSS表使其变得容易。
弹性盒子
传统的老式布局方法，如 float 和 positioning 工作，但有时它们会感觉比他们需要的更复杂、更灵活、更有弹性。例如，如果你想要：
- 垂直中心盒子的内容（不仅仅是文本；
line-height将会失效）。 - 制作几列有相同的高度包含不同数量内容的列，不使用固定的高度，或用背景图像伪装。
- 在一行中创建几个盒子，占用相同数量的可用空间，不管有多少个，并且如果它们有内边距，外边距等就应用它。
上面的例子几乎不可能通过常规的CSS实现——弹性盒子（或flexbox）是为了让这些东西更容易实现而被发明的。
网格布局
这里提到的最具实验性的特性是CSS网格，它在浏览器中还没有得到广泛的支持。Web页面通常使用网格系统布局，与打印媒体相同，这里的想法是通过定义一个网格来简化这个过程，然后定义内容的哪些部分位于网格的每个区域。