CSS 页面布局技术使得开发者可以拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。其中包括了很多种技巧，本文将举出浮动、定位、弹性盒子布局、网格布局四种技巧的应用场景以及实操实践。
1.浮动（Floats）：
简介：float 属性最初只用于在成块的文本内浮动图像，但是现在它已成为在网页上创建多列布局的最常用工具之一。
应用场景：创建多栏布局，实现图像环绕文本等效果。
实操实践：通过给要浮动的元素添加float: left或float: right来设置元素的浮动方向。
浮动效果如上图（float: left）
所以现在浮动已经不仅仅局限于在文字中浮动图像，更是可以为合理布局进行使用。2.定位（Positioning）：
简介：定位允许你从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。
应用场景：创建层叠布局、悬停效果，以及自定义元素摆放方式。
实操实践：使用position: relative（相对定位）对父元素进行定位，然后通过position: absolute（绝对定位）对子元素进行具体位置的调整。
我之前在类似于音乐播放器的时候，也会经常使用定位技巧，可以绝对固定翻页键在页面的位置，防止上下页键乱跑。
3.弹性盒子布局（Flexbox）：
简介：弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。
应用场景：创建自适应、响应式布局，以及对齐和分布子元素。
实操实践：将容器元素的display属性设置为flex，然后使用flex-direction、justify-content和align-items等属性来控制子元素的布局。
示例如上图
弹性盒子用途非常广泛，我在之前开发音乐平台时多处用到，可以使页面布局调整更加动态以及弹性调节歌手列表歌单列表等等。- 网格布局（Grid）：
简介：网格是由一系列水平及垂直的线构成的一种布局模式。根据网格，开发者能够将设计元素进行排列，帮助开发者设计一系列具有固定位置以及宽度的元素的页面，使我们的网站页面更加统一。
应用场景：创建复杂的网格结构布局，支持自适应和多列布局。
实操实践：通过设置容器元素为display: grid，并使用grid-template-columns和grid-template-rows来定义网格结构，使用grid-column和grid-row为子元素指定位置。
网格布局在我之前的应用中还没有怎么使用，以后会加以实践。 总而言之我认为CSS布局技巧是丰富且实用的，是CSS的精髓之一，需要好好掌握。
