CSS布局技术用于控制和排列网页中的元素，实现各种不同的布局效果。以下是几种常见的CSS布局技术：
2.1 浮动布局
浮动布局是一种传统的布局技术，通过将元素浮动到左侧或右侧来实现布局。常用的浮动属性是 float，它可以取值为 left 或 right。
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>.box {
width: 200px;
height: 200px;
float: left;
}2.2 定位布局
定位布局使用CSS的 position 属性来精确定位元素的位置。常用的定位属性有：
static：默认值，元素按照正常的文档流排列。relative：相对定位，元素相对于其正常位置进行定位，可以使用top、bottom、left、right属性来调整位置。absolute：绝对定位，元素相对于其最近的非static定位父元素进行定位。fixed：固定定位，元素相对于浏览器窗口进行定位，即使页面滚动，元素位置也不会改变。
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>.container {
position: relative;
}
.box {
width: 200px;
height: 200px;
position: absolute;
}
.box:nth-child(1) {
top: 0;
left: 0;
}
.box:nth-child(2) {
top: 0;
right: 0;
}
.box:nth-child(3) {
bottom: 0;
left: 0;
}2.3 Flex布局和Grid布局
Flex布局（弹性布局）和Grid布局（网格布局）是CSS3中引入的新的布局模型，提供了更强大和灵活的布局功能。
Flex布局使用display: flex来创建一个弹性容器，通过设置容器的属性来控制其中子元素的布局。常用的属性有：
flex-direction：指定主轴的方向（水平或垂直）。justify-content：定义子元素在主轴上的对齐方式。align-items：定义子元素在交叉轴上的对齐方式。
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<
div class="box">Box 3</div>
</div>.container {
display: flex;
justify-content: space-between;
}
.box {
width: 200px;
height: 200px;
}Grid布局通过将网格划分为行和列来控制布局，使用display: grid来创建一个网格容器，通过设置容器的属性来定义网格的结构。常用的属性有：
grid-template-columns：定义网格的列数和宽度。grid-template-rows：定义网格的行数和高度。grid-gap：定义网格之间的间隔。
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.box {
width: 200px;
height: 200px;
}2.4 响应式布局
响应式布局是一种根据设备的屏幕尺寸和特性，自动调整和适应布局的技术。通常使用CSS媒体查询（@media）来实现响应式布局，根据不同的屏幕宽度应用不同的样式。
.container {
display: flex;
flex-direction: column;
}
.box {
width: 100%;
height: 200px;
}
@media screen and (min-width: 768px) {
.container {
flex-direction: row;
}
.box {
width: 33.33%;
}
}以上是CSS布局技术的简要介绍和示例代码，通过学习和应用这些技术，你将能够更加灵活地控制网页的布局和外观。