一、浮动布局
（一）浮动的概念与语法
浮动是 CSS 中的一种布局方式，通过设置元素的float属性，可以让元素向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。语法为float: left / right / none / inherit。例如，float: left表示元素向左浮动，float: right表示元素向右浮动，float: none是默认值，元素不进行浮动，float: inherit表示继承父元素的浮动属性。
（二）应用场景
块元素横向布局：浮动常用于设置对象靠左与靠右浮动样式，可用于做页面布局，主要应用在块元素的横向布局场景下。例如，多个块级元素可以通过设置浮动属性，实现横向排列，从而创建多列布局。
文字环绕效果：当一个元素设置了浮动属性后，文字会围绕在浮动元素的周围，实现类似报纸杂志中的图文环绕效果。例如，将图片设置为浮动，可以使文本自动环绕在图片周围。
二、定位布局
（一）定位的属性与特点
定位布局有四种主要属性：相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和静态定位（static）。
相对定位（relative） ：相对定位是元素相对于其在原来标准流中位置进行移动，不脱离文档流，仍然占据原来的空间，后面的元素会以其原始位置为参考进行布局。相对定位会提升一个层级，如果与其他元素发生重叠，它会在上面。相对定位不会改变元素的性质，块元素仍然是块元素，行内元素仍然是行内元素。如果不设置任何偏移值，元素则不会有任何变化。例如，在进行小范围的位置调整时，可以使用相对定位，同时它也常作为 “子绝父相” 策略中的父元素定位方式。
绝对定位（absolute） ：绝对定位的元素会脱离文档流，不再占据原来的空间，后面的元素会忽略它原来的位置。绝对定位默认相对于离它最近的开启了定位的父级元素进行定位，如果父元素都没有定位，则相对于body进行定位。绝对定位也会提升一个层级，并且会改变元素的性质，行内元素会变成块状元素。绝对定位需要配合偏移量（如top、left等）来确定元素的具体位置。
固定定位（fixed） ：固定定位是绝对定位的一种特殊形式，它永远相对于浏览器窗口进行定位，不随页面滚动而滚动。固定定位的元素不占位置，会脱离文档流，例如常见的漂浮客服、回到顶部按钮等都是使用固定定位。
静态定位（static） ：静态定位是 HTML 元素默认的定位方式，无特殊定位效果，不能通过z-index进行层次分级，在普通流中，各个元素默认都是静态定位。
（二）应用场景
层叠盒子：当需要两个或多个盒子层叠在一起时，可以使用定位布局。例如，蓝色和粉色的两个盒子需要层叠，可以通过给其中一个盒子设置相对定位，另一个盒子设置绝对定位，并配合偏移量来实现层叠效果。
广告栏：广告通常需要在页面的特定位置显示，并且不随页面滚动而滚动，这时可以使用固定定位。固定定位可以让广告元素始终固定在屏幕中的某个位置，吸引用户的注意力。
搜索栏：搜索栏可以使用绝对定位，将其定位在页面的特定位置，如页面的顶部或侧边。这样用户在浏览页面时可以随时方便地进行搜索。
三、弹性盒子布局
（一）弹性盒子布局的属性
- 容器属性：
-
- flex-direction：决定主轴的方向，有row（横向从左到右排列，默认值）、row-reverse（反转横向排列，右对齐）、column（纵向排列）、column-reverse（反转纵向排列）等选项。
-
- flex-wrap：伸缩流换行方式，nowrap（不换行，可能会出现重叠或内容超出范围）、wrap（当伸缩项目占满容器主轴方向上的一行时，多出来的部分将进行换行）、wrap-reverse等。
-
- justify-content：设置伸缩项目在主轴方向进行排布的时候的对齐方式，有flex-start（伸缩项目从容器的最左侧开始排布）、flex-end（伸缩项目从容器的最右侧开始排布）、center（伸缩项目位于容器的中心）、space-between（伸缩项目位于各行之间留有空白的容器内部，从两边开始，中间间隔有空白）、space-around（伸缩项目均匀的分布在中间，首尾两边和弹性容器之间留有一半的间隔）等。
-
- align-items：设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式，有flex-start（弹性盒子元素的侧轴起始位置的边界紧靠住该行的侧轴起始边界）、flex-end（弹性盒子元素的侧轴起始位置的边界紧靠住该行的侧轴结束边界）、center（弹性盒子元素在该行的侧轴上居中放置）、baseline（如弹性盒子元素的行内轴与侧轴为同一条，则该值与flex-start等效，其它情况下，该值将参与基线对齐）、stretch（如果指定侧轴大小的属性值为auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照min/max-width/height属性的限制）等。
-
- align-content：定义多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用。有flex-start、flex-end、center、space-between、space-around、stretch等选项。
-
- flex-flow：伸缩流，包含了伸缩流换行和方向，是flex-direction和flex-wrap属性的复合属性。
- 容器成员属性：
-
- order：将元素与序号关联起来，以此决定哪些元素先出现。
-
- margin-right: auto; ：margin 值为 auto，自动获取弹性容器中剩余的空间，将剩余的空间放置在元素的右侧。
-
- align-self：设置弹性元素自身在纵轴方向上的对齐方式，有auto、flex-start、flex-end、center、baseline、stretch等选项。
-
- flex：指弹性子元素如何分配空间，是flex-grow、flex-shrink和flex-basis属性的简写。单值语法中，值必须为以下其中之一：一个无单位数（会被当作flex: number 1 0）、一个有效的宽度值、关键字none、auto或initial。双值语法中，第一个值必须为一个无单位数，第二个值必须为一个无单位数（会被当作flex-shrink的值）或一个有效的宽度值。三值语法中，第一个值必须为一个无单位数，第二个值必须为一个无单位数，第三个值必须为一个有效的宽度值。
（二）应用场景
- 水平垂直居中：使用弹性盒子布局可以轻松实现元素的水平垂直居中。例如，设置容器的display:flex和justify-content:center、align-items:center属性，即可让容器中的子元素在水平和垂直方向上都居中显示。
- 实现移动端布局：在移动端开发中，弹性盒子布局非常适用。由于移动端屏幕尺寸多样，需要布局能够自适应不同的屏幕大小。弹性盒子布局可以根据屏幕尺寸自动调整元素的排列和大小，实现良好的响应式布局。例如，在制作移动端应用的界面时，可以使用弹性盒子布局来确保各个元素在不同尺寸的屏幕上都能合理显示。
- 制作复杂页面布局：对于复杂的页面布局，弹性盒子布局也能发挥很大的作用。比如，在制作一个包含多个板块的页面时，可以使用弹性盒子布局来灵活地安排各个板块的位置和大小。可以通过设置不同的容器属性和成员属性，实现板块的自适应、对齐和分布等效果。
四、布局技巧实操个人实践
（一）定位布局的实践应用
使用定位布局可以实现悬浮导航栏，通过设置导航栏为固定定位，使其始终显示在页面的特定位置，不随页面滚动而滚动。例如：
<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="navbar">导航栏</div>
<p>页面内容...</p>
</body>
</html>
居中定位可以利用绝对定位和transform属性实现元素在父元素中的居中显示。例如：
<div class="parent">
<div class="child">居中元素</div>
</div>
.parent {
position: relative;
height: 200px;
background-color: #eee;
}
.child {
position: absolute;
width: 50px;
height: 50px;
background-color: #7FFFD4;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
瀑布流布局可以通过绝对定位实现，每个元素根据其在页面中的位置进行定位，形成错落有致的布局效果。例如：
<div class="waterfall-container">
<div class="waterfall-item">图片 1</div>
<div class="waterfall-item">图片 2</div>
<div class="waterfall-item">图片 3</div>
<!-- 更多图片元素 -->
</div>
.waterfall-container {
position: relative;
}
.waterfall-item {
position: absolute;
width: 200px;
height: auto;
background-color: #ccc;
margin: 10px;
}
