CSS布局方式
CSS布局方式包括浮动（float），定位（position），弹性盒子（flex布局）等，它们各自都有不同使用场景。
浮动
介绍
<div class="one">123</div>
<div class="two">456</div>
<div class="three">789</div>
10
正常情况下，这三个div不在一行排。
想让这三个div在一行排，如果直接让块转行内块，会产生一个空格的距离（display:inline-block）。
如果让div代码不换行，确实可以让两个div靠在一起。
<div class="one">123</div><div class="two">456</div>
<div class="three">789</div>
10
但是不能一直不换行，这时就需要浮动来解决（float:left），用浮动让div没有间距的在一行排列。
特点
- 浮动脱离标准流，类似于和标准流不在同一个图层，两个图层的东西互不影响。
- 下一个浮动的元素跟着上一个浮动的元素走。
- 浮动后的元素具备行内块特点。
- 浮动后的元素不能使用
text-align:center或margin:0 auto来居中。
实践
可用来做图文环绕。下面是介绍哈利波特，其中用一个带边框的div代表他的图片。
可用来网络布局。下面做出了侧边栏。
定位
介绍
定位包括静态定位（position:static）、相对定位（position:relative）、绝对定位（position:absolute）和固定定位（position:fixed）。
相对定位（position:relative），指相对于自己本身的位置移动，在页面占位置。下面的代码中，第2个div向右移动30px，向下移动20px。
.two{
position: relative;
left: 30px;
top: 20px;
background-color: aqua;
}
绝对定位（position:absolute），指子级元素相对于非静态的广义父级进行移动，在页面中不占位置。下面的代码中，父级向下移动30px，子级向右移动30px。
<div class="one">
<div class="two"></div>
</div>
.one{
position: relative;
top: 30px;
}
.two{
position: absolute;
left: 30px;
}
固定定位（position:fixed），指固定在浏览器固定位置，无论怎么移动窗口，那个元素都会在那，在页面中不占位置。例如，大部分网站都会有的“回到顶部”。
特点
- 绝对定位和相对定位都类似于浮动，具备了行内块的性质。
- 偏移值left表示距离左边的距离，可以为负数。
- 绝对定位的元素，如果找不到有定位的广义父级，则以浏览器窗口为准。
- 绝对定位的盒子不能使用
margin:0 auto水平居中。要想实现水平居中，可以先用left:50%把盒子左边线移到浏览器中间，再向左移盒子宽度的一半。
实践
绝对定位可以配合结构伪类hover使用，鼠标悬停前。鼠标悬停后，用方框表示出现的二维码。
弹性盒子
介绍
弹性盒子包括主轴和侧轴排列（主轴默认是水平方向）。
父级容器创建弹性容器（display:flex），子级元素即为弹性盒子。可让弹性盒子自动对齐，下面是水平让空白均分在弹性盒子两侧（justify-content:space-around）。
<div class="one">
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
.one{
display: flex;
justify-content: space-around;
}
垂直让空白均分在弹性盒子之间（align-content: space-between）。
.one{
display: flex;
align-content: space-between;
}
特点
- 多个弹性盒子塞不下在同一行时，可以使用自动换行（
flex-wrap:wrap），这样不用计算和使用结构伪类来换行。 - 修改主轴方向（
flex-direction），虽然可以用justify-content和align-content实现水平和垂直方向的排列。 - 用弹性伸缩比（
flex）按比例给不同盒子宽高，不用手动计算长度。 align-items给父级容器设置，而align-self可以给单独的盒子设置，按侧轴对齐。
实践
flex布局可用于网页视频的排版，相比于浮动不用手动计算，下面用方框表示视频。
