本文将对CSS的浮动、定位和弹性盒子布局这三种布局技巧进行分析，并给出这三种技巧各自对应的应用场景和实操实践。
一、浮动
浮动属性也称float属性，它最初只用于在成块的文本内浮动图像，但是现在它已成为在网页上创建多列布局的最常用工具之一。而所谓多列布局实质上就是一种文字环绕，通过设置float属性就可以实现元素并排的效果。
float的属性值和对应的效果如下：（图片采自小马哥）
具体的实现用例如下：
.a1 {
width: 150px;
height: 100px;
background-color: orange;
float: left;
}
以上即为左浮动的实例代码。
二、定位
即position属性。其表示的是这个元素应当位于文档中的什么位置。比如如果输入的是top属性值，那么该元素应当位于文档顶部；如果输入的是right属性值，那么该元素应当位于文档的右侧。类似的属性值还有bottom和left，它们所能呈现的文档属性效果与前面类似。
除了这些能将元素引导至最终位置的属性值外还有其他属性值。它们涉及到相对定位和绝对定位等。
以静态定位为例，实例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>静态定位</title>
<style type="text/css">
.positioned{
position: static;
background-color: red;
}
</style>
</head>
<body>
<p class="positioned">我是静态定位的元素</p>
</body>
</html>
三、弹性盒子布局
即Flexible Box简称Flex属性，顾名思义它先是一个盒子，然后它具有弹性。使用了Flex的元素称Flex容器，许多容器的集合称Flex项目。（图片采自三十课）
容器的横轴称主轴，纵轴称交叉轴。开始的位置称start，结束位置称end。
基本语法以主轴方向flex-direction为例，其他不过多赘述。
row表示从左向右排列row-reverse表示从右向左排列column表示从上向下排列column-reverse表示从下向上排列
