浮动
浮动（Float）是一种常用的CSS布局技巧，它可以使元素向左或向右浮动，并允许其他元素环绕在其周围。以下是浮动的应用场景和实操实践：
应用场景：
- 创建多列布局，如实现导航栏和内容区域的布局。
- 图片和文字的混排，实现图文并茂的效果。
实操实践：
.navbar {
float: left;
width: 20%;
}
.content {
margin-left: 25%;
}
在上面的实例中，导航栏元素使用float: left;进行左浮动，宽度设置为20%。内容区域元素使用margin-left: 25%;来使其与导航栏保持一定的间距。
需要注意的是，浮动会改变元素的脱离文档流的特性，可能会对其他元素产生影响。为了避免这种影响，可以使用clear属性来清除浮动。
.clearfix::after {
content: "";
display: table;
clear: both;
}
在上述示例中，我们给包含浮动元素的父元素加上.clearfix类，并使用::after伪元素来插入内容并使用clear: both;来清除浮动。
定位
定位（Positioning）是一种常见的CSS布局技巧，用于精确地定位元素在页面上的位置。常用的定位属性包括：position: static;、position: relative;、position: absolute; 和 position: fixed;。以下是定位的应用场景和实操实践：
应用场景：
- 创建悬浮效果：通过将元素定位为相对位置（
position: relative;），然后通过调整top、bottom、left和right属性来使元素悬浮在指定位置。 - 固定在页面的特定位置：通过将元素定位为固定位置（
position: fixed;），然后通过设置top、bottom、left和right属性来使元素固定在屏幕上的某个位置。
实操实践：
.float-box {
position: relative;
top: 20px;
left: 50px;
}
.fixed-box {
position: fixed;
top: 20px;
right: 20px;
}
在上面的示例中，float-box类使用相对定位（position: relative;），并通过设置top和left属性来使元素相对原来的位置上移20px和向左移动50px。fixed-box类使用固定定位（position: fixed;），并通过设置top和right属性来使元素固定在屏幕的右上角位置。
需要注意的是，使用定位属性会使元素脱离正常的文档流，可能会对其周围的元素和布局产生影响。因此，在使用定位时需要注意谨慎调整位置和使用适当的容器和布局结构。
另外，定位元素的定位依赖于它的父元素或祖先元素的定位属性。如果父元素或祖先元素没有设置定位属性，那么定位元素会以文档流的形式进行定位。
弹性盒子布局
弹性盒子布局（Flexbox）是一种用于创建灵活且自适应的布局模型。它是基于一维布局的，可以使元素在水平或垂直方向上进行弹性的伸缩和对齐。以下是弹性盒子布局的一些重要概念和实操实践：
概念：
- 容器（Container）：包含了弹性盒子子元素的父元素，通过设置
display: flex;或display: inline-flex;来创建弹性容器。 - 弹性盒子子元素（Flex Items）：容器内的子元素，被设置为弹性盒子后成为弹性盒子子元素。
- 主轴（Main Axis）：弹性盒子的水平或垂直方向，可以通过
flex-direction来设置。 - 交叉轴（Cross Axis）：与主轴垂直的方向。
实操实践：
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.item {
flex: 1;
}
在上面的示例中，.container是一个弹性容器，使用display: flex;来创建弹性盒子。flex-direction: row;设置主轴方向为水平方向。justify-content: center;将弹性盒子子元素水平居中对齐。align-items: center;将弹性盒子子元素垂直居中对齐。
.item是弹性盒子子元素，flex: 1;将它的伸缩比例设置为1，使其在主轴上平均占据剩余的空间。
弹性盒子布局还有很多其他的属性，如flex-wrap、align-self、order等，可以根据实际需求进行灵活设置和应用。
