一、浮动布局（Float Layout）
浮动布局是一种将元素从文档的正常流中移动，并使其可以相对于其容器或其他元素对齐的技术。
-
使用方式：在CSS中将元素的
float属性设置为left、right或both，分别表示元素左浮动、右浮动或两侧都浮动。 -
特点：
- 浮动元素会脱离正常的文档流，并根据指定的方向浮动到容器的一侧。
- 其他元素会环绕在浮动元素的周围。
- 浮动元素会影响父元素的高度（可能导致父元素高度塌陷），需要清除浮动（如使用
clear属性或创建BFC）来解决这个问题。
下面是通过元素的
float属性设置为left来进行编写：
接下来是html以及运行的结果：
可以看到通过float属性将元素进行调整，使其与其他元素对齐。
二、定位布局（Positioning Layout）
定位布局通过position属性来灵活改变元素在网页中的位置。
- 静态定位（static） ：默认值，元素按照文档流正常排列，不受
top、right、bottom、left属性影响。 - 相对定位（relative） ：元素相对于其正常位置进行偏移，但仍占据原来的空间。
- 绝对定位（absolute） ：元素相对于最近的已定位祖先元素（非
static）进行定位，如果没有已定位的祖先元素，则相对于初始包含块（通常是<html>元素）进行定位。绝对定位的元素脱离文档流，不占据空间。 - 固定定位（fixed） ：元素相对于浏览器窗口进行定位，即使页面滚动，元素的位置也不会改变。固定定位的元素也脱离文档流，不占据空间。
- 粘性定位（sticky） ：元素在跨越特定阈值前为相对定位，之后为固定定位。这通常用于创建在滚动时保持固定位置的元素（如头部导航栏）。
实践如下图所示：
这是CSS样式，通过定位布局可以灵活的改变元素的位置，下面是html和运行结果的演示：
由以上图可以看到，通过点击sign in 来对有无账号进行选择，同时，元素也跟着点击而进行对应的变换。
三、弹性盒子布局（Flexbox Layout）
弹性盒子布局（Flexbox）是一种一维布局模型，用于在容器中沿主轴或交叉轴排列子元素。
-
使用方式：给父元素设置
display: flex，使其成为一个弹性容器，其子元素则成为弹性子元素。 -
主要属性：
flex-direction：决定主轴的方向（即弹性子元素的排列方向）。flex-wrap：决定子元素是否换行以及如何换行。justify-content：定义弹性子元素在主轴上的对齐方式。align-items：定义单行弹性子元素在交叉轴上的对齐方式。align-content：定义多行弹性子元素在交叉轴上的对齐方式（需开启flex-wrap）。flex-grow、flex-shrink、flex-basis：分别定义弹性子元素的增长比例、收缩比例和初始大小。
以下是盒子的样式：
下面是html和运行的结果：
由图可以看到，通过鼠标经过哪一幅图，哪一幅图就会进行相应的变化。以上就是实践记录的实操实践，下面是应用场景：
- 浮动布局：常用于实现图文混排、多栏布局，适用于早期网页设计中的固定布局。
- 定位布局：用于精确控制元素位置，适合创建悬浮菜单、弹窗等需要特殊定位的元素。
- 弹性盒子布局：灵活响应不同屏幕尺寸，常用于现代网页设计中实现自适应和流式布局。 工具使用是VScode，VSCode是微软开发的免费开源跨平台代码编辑器，支持多种语言，拥有丰富扩展和智能编辑功能。
