CSS布局技术能够控制网页中的元素在页面上显示的位置。根据不同的定位方法，常见的css布局技术有以下几种：
- 正常布局流
- display属性
- 弹性盒子
- 网格
- 浮动
- 定位
- 表格布局
- 多列布局
下面针对以上方法进行阐述说明。
1.正常布局流
正常布局流（normal flow）是指在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式。最直观的显示便是从左往右、从上到下依次排列，各块元素换行分隔。例子如下：
<p>I love my dog.</p>
<ul>
<li>feed dog</li>
<li>go to school</li>
<li>do housework</li>
<ul>
2.display属性
display属性通过设定值来设置一个元素应如何显示。此属性允许我们更改默认的显示方式。正常流中的所有内容都有一个display的值，用作元素的默认行为方式。但是通过更改这个display的值，便可以更改元素的行为方式。常见的属性值有以下这些：
- none：隐藏元素
- inline：将元素以内联元素方式显示
- block：将元素以块元素方式显示
3.弹性盒子
Flexbox 是 CSS 弹性盒子布局模块（Flexible Box Layout Module）的缩写，是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性，用于创建横向或是纵向的一维页面布局，在该布局内的元素会自动横向或纵向延伸填满布局。要使用 flexbox，只需要在 flex 布局的父元素上应用display: flex ，所有直接子元素都将会按照 flex 进行布局。
4.网格
网格布局通过设立display：grid在页面上创建隐形网格，用于同时在两个维度上把元素按行和列排列整齐。网格使用grid-template-rows和grid-template-columns两个属性定义了一些行和列的数量和轨道，设立grid属性的元素的字元素会自动顺序排列进网格之中。当然，利用 grid-column和grid-row两个属性可以来指定每一个子元素应该从哪一行/列开始，并在哪一行/列结束。这就能够让子元素在多个行/列上展开。
5.浮动
在css之中设立了float属性后，设立的元素会脱离正常布局流中跟随其他元素的行为，并移动到所设立的方向边缘，被其他元素所环绕。float常见的属性值有：
left— 将元素浮动到左侧。right— 将元素浮动到右侧。none— 默认值，不浮动。inherit— 继承父元素的浮动属性。
例如对一个块元素div设立了float：left且未被其他布局属性覆盖，无论该元素之前的位置在哪，都会移动到父元素的最左边，其他同横向的元素就被相应的移动到右边，就如同在水中"浮"到表面。
6.定位
定位 (position) 能够把一个元素从正常布局流的位置移动到另一个位置。虽然定位可以指定元素处于任意位置，但它并不是一种主要页面布局的方式，更像是管理和微调页面中的一个特殊项的位置。对于主要页面布局的设计，是不会大面积使用定位的；只有类似特殊要求如浮窗等才使用定位。 定位主要有五种：
- 静态定位
static：在正常布局流中的默认位置。 - 相对定位
relative：相对静态定位的一定偏移位置。 - 绝对定位
absolute：脱离正常布局流，相对于页面的<html>元素边缘或者相对于该元素的最近被定位祖先元素以坐标绝对位置。 - 固定定位
fixed：脱离正常布局流，相对浏览器视口固定的位置。 - 粘性定位
sticky:起始和静态定位一致，当它的相对视口位置达到某一个预设值时，它就会像position: fixed一样定位。
7.表格布局
在Flexbox 和 Grid未出现时，过去通常使用表格布局display: table来进行对元素的布局对齐，被称为CSS表格。可以使用display: table-caption、display: table-row、display: table-cell、display: table-caption等属性对css表格的样式进行设置，将对应的元素放入对应的表格位置之中。
8.多列布局
为了突破正常布局流从上到下的排列顺序，可以使用多列布局对页面进行横向分栏分成不同列，其中column-count用于设立需要分的列数，column-width用于该元素所在列的列宽。
