前言：在web网页布局中，CSS布局是重要的一步，网页的布局完美，合理，可以给用户带来美好的视觉感及体验感，本文将要展现的是CSS布局技巧，它是指在网页设计中使用CSS来实现各种不同的布局效果。其包括浮动、定位、弹性盒子布局等，在这里将介绍这些常用的CSS布局技巧并讨论它们的应用场景以及提供一些实操实践的代码示例。
一、浮动布局（Float Layout）
它是一种常见的CSS布局技术，通过使用float属性来实现元素的浮动效果。浮动布局常用于实现多列布局，如实现多栏新闻、图文混排等。 float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
- 语法： 选择器｛ float ：属性值；}
- 属性值描述：
none：元素不浮动（默认值）
left元素向左浮动
right 元素向右浮动
应用场景：
- 可以让多个块级元素一行内排列显示（无缝隙）。
<style>
.blo1{
float: left;
width: 100px;
height: 100px;
background-color: #efef58;
}
.blo2{
float: left;
width: 100px;
height: 100px;
background-color: #3ba9b3;
}
.blo3{
float: left;
width: 100px;
height: 100px;
background-color: #65efb6;
}
</style>
</head>
<body>
<div class="blo">
<div class="blo1"> </div>
<div class="blo2"></div>
<div class="blo3"></div>
</div>
</body>
结果展示：
- 结论：如上面所展示的，使三个div块级盒子横向展示，如果使用标准流，用display: inline-block来展示的话，三个盒子之间有缝隙，所以使用float: left，使其都向着左边浮动，那么就横向形成一列，没有缝隙。
二、定位（Positioning）布局
它是一种CSS布局技术，通过使用position属性来实现元素的绝对或相对定位。top，right，bottom，left属性则决定了该元素的最终位置。定位布局常用于实现弹出框、导航栏等需要精确定位的元素。
应用场景：
- 弹出框：适用于实现弹出框、悬浮菜单等布局需求。
<style>
.b{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="b" > <h2>nm</h2> <p>xxx</p>
</div>
</body>
弹出框使用position: absolute进行绝对定位，top: 50%; left: 50%将其居中定位，transform: translate(-50%, -50%)用于微调居中位置。
三、弹性盒子布局Flexbox Layout）
它是一种CSS布局技术，通过使用display: flex属性来实现容器和子元素的弹性布局。弹性盒子布局常用于实现响应式布局和灵活的元素排列。
应用场景：
- 响应式布局：适用于不同屏幕尺寸下的布局需求。
- 灵活的元素排列：适用于实现元素的水平/垂直居中、等高布局等需求。
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
.c{ text-align: center; }
</style>
<body>
<div class="container">
<div class="c">
<h2>xxx</h2> <p>content</p>
</div> </div>
</body>
上述中定义了一个容器和一个内容块的HTML结构。容器使用弹性盒子布局，通过display: flex设置容器为弹性容器，justify-content: center使内容水平居中，align-items: center使内容垂直居中。容器的高度为100px。
内容块使用text-align: center使内容水平居中。
结语：
通过以上实例，可以看出浮动布局适用于多列布局，定位布局适用于弹出框等精确定位的布局，而弹性盒子布局适用于响应式布局和灵活的元素排列。这些布局都需要去深入了解学习、掌握，对后面的网页很有帮助。
