一、浮动布局
浮动布局是一种常见的CSS布局技巧，通过设置元素的浮动属性（float）来实现元素的排列和定位。浮动布局适用于创建多列布局、图文混排等场景。
实操实践：
- 创建多列布局：通过将多个元素设置为浮动，可以实现多列布局。可以使用float: left;或float: right;来控制元素的浮动方向。
- 图文混排：将图片和文字分别设置为浮动，可以实现图片和文字在同一行内排列的效果。可以使用float: left;或float: right;来控制图片和文字的浮动方向。
二、定位布局
定位布局是一种通过设置元素的定位属性（position）来实现元素的精确定位的布局技巧。定位布局适用于创建特定位置的元素，如导航栏、弹出框等。
实操实践：
- 创建导航栏：通过将导航栏元素设置为绝对定位（position: absolute;），并设置top、left、right等属性来控制导航栏的位置。
- 创建弹出框：通过将弹出框元素设置为固定定位（position: fixed;），并设置top、left、right、bottom等属性来控制弹出框的位置。
三、弹性盒子布局
弹性盒子布局（Flexbox）是一种现代的CSS布局技术，通过设置容器的display属性为flex，可以实现灵活的元素排列和对齐方式。弹性盒子布局适用于创建响应式布局和等高布局等场景。
实操实践：
- 创建响应式布局：通过将容器设置为弹性盒子（display: flex;），可以实现元素的自适应布局。可以使用flex属性来控制元素的伸缩比例和对齐方式。
- 创建等高布局：通过将容器设置为弹性盒子，并设置align-items属性为stretch，可以实现元素等高的布局效果。
Document
/* 浮动布局 */
.float-container {
width: 400px;
}
.float-box {
width: 100px;
height: 100px;
background-color: red;
float: left;
margin: 10px;
}
/* 定位布局 */
.position-container {
position: relative;
width: 400px;
height: 200px;
}
.position-box {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 50px;
left: 50px;
}
/* 弹性盒子布局 */
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 400px;
height: 100px;
}
.flex-box {
width: 100px;
height: 100px;
background-color: green;
}
