CSS中初级最基础的标准流布局，其他常用的布局技巧还包括浮动、定位和弹性盒子布局。我们将探讨它们的应用场景，并提供一定的代码示例。
🐳 1. 浮动（Float）
浮动是一种常用的CSS布局技巧，通过将元素从正常的文档流中脱离，并使其向左或向右浮动，来实现多列布局或图文混排的效果。
应用场景：
- 创建多列布局：通过将多个元素设置为浮动，可以实现多列布局，如新闻列表、产品展示等。
- 图文混排：将图片设置为浮动，可以使文字环绕在图片周围，实现图文混排的效果。
实操实践代码示例：
<style>
.float-left {
float: left;
margin-right: 10px;
}
.float-right {
float: right;
margin-left: 10px;
}
</style>
<div class="float-left">
<img src="image.jpg" alt="Image">
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat lacus sit amet justo aliquam, vel dignissim dolor fringilla. Mauris auctor, tortor in ullamcorper dignissim, tellus purus viverra est, at pellentesque lorem nunc in felis.</p>
</div>
🎨 2. 定位（Positioning）
定位是一种常用的CSS布局技巧，通过设置元素的定位属性（如position: absolute或position: relative）和偏移属性（如top、right、bottom和left），来精确地控制元素在页面中的位置。
应用场景：
- 创建层叠效果：通过使用绝对定位（
position: absolute）和相对定位（position: relative）来控制元素的层叠顺序，可以实现一些特殊的效果，如弹出框、下拉菜单等。 - 实现精确布局：通过设置元素的偏移属性，可以实现精确的布局，如固定导航栏、居中对齐等。
实操实践代码示例：
<style>
.container {
position: relative;
width: 300px;
height: 200px;
border: 1px solid #ccc;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: #f00;
}
</style>
<div class="container">
<div class="box"></div>
</div>
🍧 3. 弹性盒子布局（Flexbox）
弹性盒子布局（Flexbox）是一种新的CSS布局模型，通过使用display: flex和相关属性，可以快速创建灵活的布局，适应不同尺寸的屏幕和设备。
应用场景：
- 创建响应式布局：弹性盒子布局可以根据容器的大小自动调整子元素的位置和大小，适应不同的屏幕尺寸和设备。
- 实现等高布局：通过设置
align-items: stretch属性，可以使弹性盒子容器中的子元素自动填充相同的高度。
代码示例：
<style>
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
flex: 1;
height: 100px;
background-color: #f00;
margin: 0 10px;
}
</style>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
