- 浮动（float）：
CSS中的浮动（float）是一种布局技术，用于控制元素在页面中的位置。当一个元素设置了浮动属性后，它会脱离正常的文档流，然后根据设置的浮动方向，尽可能地靠近指定的位置。
浮动有三个可能的值：left（左浮动）、right（右浮动）和none（不浮动，默认值）。通过设置元素的float属性，可以将元素向左或向右浮动，使其与周围的元素进行对齐。
浮动元素会影响其他元素的布局。浮动元素会尽量靠近其前面的浮动元素或块级元素的边缘，直到碰到容器的边界或另一个浮动元素。其他元素会根据浮动元素的位置进行自适应调整。
浮动元素常用于创建多栏布局，例如实现网页的导航栏、侧边栏和内容区域。通过设置不同元素的浮动属性和宽度，可以实现各种不同的布局效果。
然而，浮动元素也可能引发一些问题。例如，浮动元素可能导致容器高度塌陷，即容器的高度无法自动适应其内部浮动元素的高度。为了解决这个问题，可以使用清除浮动（clearfix）的技术。
总结起来，CSS中的浮动是一种用于控制元素位置的布局技术。它通过设置元素的浮动属性，使元素脱离正常文档流，并根据指定的浮动方向进行位置调整。浮动元素常用于创建多栏布局，但也可能引发一些问题，需要注意处理。
应用场景：浮动常用于实现多栏布局，例如实现网页的导航栏和内容栏的布局。
实操实践：
HTML：
<div class="container">
<div class="sidebar">导航栏</div>
<div class="content">内容栏</div>
</div>
CSS：
.container {
width: 100%;
overflow: hidden;
}
.sidebar {
float: left;
width: 20%;
}
.content {
float: right;
width: 80%;
}
-
定位（position）：
在CSS中，有四种主要的定位方式，分别是相对定位（relative），绝对定位（absolute），固定定位（fixed）和粘性定位（sticky）。下面对每种定位方式进行详细介绍： -
相对定位（relative）：相对定位是相对于元素在正常文档流中的位置进行定位。通过设置元素的top、bottom、left和right属性，可以将元素相对于其原始位置进行移动。相对定位不会影响其他元素的位置。
-
绝对定位（absolute）：绝对定位是相对于最近的已定位祖先元素进行定位，如果不存在已定位的祖先元素，则相对于最初的包含块（通常是文档的根元素）进行定位。通过设置元素的top、bottom、left和right属性，可以将元素相对于其祖先元素进行移动。绝对定位会脱离正常文档流，其他元素会忽略其位置，因此可能会覆盖其他元素。
-
固定定位（fixed）：固定定位是相对于浏览器窗口进行定位。通过设置元素的top、bottom、left和right属性，可以将元素相对于浏览器窗口进行移动。固定定位会脱离正常文档流，其他元素会忽略其位置，因此元素会保持在浏览器窗口的固定位置。
-
粘性定位（sticky）：粘性定位是相对于元素在正常文档流中的位置进行定位，但是在滚动过程中会切换为相对于其最近的具有滚动机制的祖先元素或窗口进行定位。通过设置元素的top、bottom、left和right属性，可以将元素相对于其原始位置进行移动。粘性定位会在滚动过程中保持元素在指定的位置，直到到达指定的偏移量，然后元素会固定在该位置，直到滚动回到指定的偏移量。
定位属性可以与其他CSS属性一起使用，例如width、height、background等，以实现更复杂的布局效果。定位属性的选择取决于所需的布局效果和元素的上下文环境。
应用场景：定位常用于实现元素的精确定位，例如实现弹出框或者悬浮按钮。
实操实践：
HTML：
<div class="container">
<div class="popup">弹出框</div>
<button class="button">点击弹出框</button>
</div>
CSS：
.container {
position: relative;
}
.popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
.button {
position: relative;
z-index: 1;
}
.button:hover + .popup {
display: block;
}
- 弹性盒子布局（flexbox）：
弹性盒子布局（Flexbox）是一种用于在容器中对元素进行灵活排列的布局模型。它提供了更加简洁和灵活的方式来布局和对齐元素，相比于传统的布局方式，弹性盒子布局更加适用于响应式设计和移动设备。
弹性盒子布局的关键概念包括容器（flex container）和项目（flex item）。容器是包含一组项目的父元素，而项目则是容器中的子元素。容器通过设置一些属性来决定如何排列和对齐项目。
以下是一些常用的弹性盒子布局属性：
display: flex;：将元素设置为弹性盒子布局模型。flex-direction：定义项目的排列方向。默认值为row，可以设置为row-reverse、column或column-reverse。flex-wrap：定义项目是否换行。默认值为nowrap，可以设置为wrap或wrap-reverse。justify-content：定义项目在主轴上的对齐方式。默认值为flex-start，可以设置为flex-end、center、space-between、space-around或space-evenly。align-items：定义项目在交叉轴上的对齐方式。默认值为stretch，可以设置为flex-start、flex-end、center、baseline或stretch。align-content：定义多行项目在交叉轴上的对齐方式。默认值为stretch，可以设置为flex-start、flex-end、center、space-between、space-around或stretch。flex：定义项目的伸缩比例。默认值为0 1 auto，可以设置为<flex-grow> <flex-shrink> <flex-basis>的形式。
通过设置这些属性，我们可以轻松地创建出各种各样的布局效果。例如，我们可以使用flex-direction: row;和justify-content: space-between;将项目水平排列，并在主轴上均匀分布。
弹性盒子布局还提供了一些其他的属性和值，用于调整项目的大小、顺序和对齐方式。学习和掌握这些属性和值，可以帮助我们更好地利用弹性盒子布局来创建灵活和响应式的布局。
以下是一些弹性盒子布局的主要特点和属性：
-
容器和项目：弹性盒子布局由容器和项目组成。容器是包含项目的父元素，而项目则是容器中的子元素。
-
主轴和交叉轴：弹性盒子布局有一个主轴和一个交叉轴。主轴是项目排列的方向，可以是水平方向（水平主轴）或垂直方向（垂直主轴）。交叉轴是与主轴垂直的轴线。
-
容器属性：
- display: 设置容器为弹性盒子布局。
- flex-direction: 设置主轴的方向，可以是row（水平方向）、column（垂直方向）、row-reverse（反向水平方向）或column-reverse（反向垂直方向）。
- flex-wrap: 设置项目是否换行，可以是nowrap（不换行）、wrap（换行）或wrap-reverse（反向换行）。
- justify-content: 设置项目在主轴上的对齐方式，可以是flex-start（靠左对齐）、flex-end（靠右对齐）、center（居中对齐）、space-between（两端对齐，项目之间间距相等）或space-around（每个项目两侧的间距相等）。
- align-items: 设置项目在交叉轴上的对齐方式，可以是flex-start（靠上对齐）、flex-end（靠下对齐）、center（居中对齐）、baseline（基线对齐）或stretch（拉伸对齐）。
-
项目属性：
- flex-grow: 设置项目的放大比例，默认为0，即不放大。
- flex-shrink: 设置项目的缩小比例，默认为1，即如果空间不足，项目将缩小。
- flex-basis: 设置项目在主轴上的初始大小。
- flex: 是flex-grow、flex-shrink和flex-basis的缩写。
- align-self: 设置单个项目在交叉轴上的对齐方式，可以覆盖align-items属性。
弹性盒子布局是一种强大且灵活的布局方式，可以用于创建响应式的网页布局，并且可以很容易地调整元素的排列顺序和间距。它在移动端开发中特别有用，可以根据不同设备的屏幕尺寸和方向进行自适应布局。
应用场景：弹性盒子布局常用于实现灵活的自适应布局，适用于各种屏幕尺寸和设备。
实操实践：
HTML：
<div class="container">
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
</div>
CSS：
.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 1;
}
以上是三种常用的CSS布局技巧的实例和应用场景，分别是浮动、定位和弹性盒子布局。根据具体的布局需求，选择合适的技巧来实现所需的布局。
