一、Flex布局：
1.创建一个新的HTML文件。在HTML文件中输入以下基本结构：
html
<!DOCTYPE html>
<html>
<head>
<title>Flex布局</title>
<style>
/* 在这里编写CSS样式 */
</style>
</head>
<body>
<!-- 在这里编写Flex布局的HTML结构 -->
</body>
</html>2.在<style>标签内编写CSS样式，定义Flex布局的属性。例如，可以使用以下样式来创建一个简单的水平居中布局：
html
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}```
在这个例子中，`display: flex;`将body元素设置为使用Flex布局，`justify-content: center;`和`align-items: center;`将内容水平和垂直居中，`height: 100vh;`设置body元素的高度为整个视口的高度。
3.在<body>标签内编写HTML结构，以实现所需的Flex布局。例如，可以创建一个包含两个子元素的Flex容器：
html
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
</div>4.在CSS样式中，为容器和子元素添加类选择器，并定义它们的样式。
html
.container {
display: flex;
justify-content: space-between;
}
.item {
background-color: lightblue;
padding: 10px;
}```
在这个例子中，`.container`类应用于容器元素，设置其为Flex布局，并使用`justify-content: space-between;`将子元素在容器内水平排列，并在它们之间留有空白间距。`.item`类应用于子元素，并设置背景色和内边距。
5.保存HTML文件，并使用VS Code的Live Server扩展或直接在浏览器中打开HTML文件以查看Flex布局的效果。
二、Float布局：
1.创建一个新的HTML文件。在HTML文件中输入以下基本结构：
html
<!DOCTYPE html>
<html>
<head>
<title>Float布局</title>
<style>
/* 在这里编写CSS样式 */
</style>
</head>
<body>
<!-- 在这里编写Float布局的HTML结构 -->
</body>
</html>2.在<style>标签内编写CSS样式，定义Float布局的属性。例如，可以使用以下样式来创建一个简单的左浮动布局：
html
body {
overflow: hidden;
}
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}在这个例子中，`body`元素的`overflow: hidden;`属性用于清除浮动，以便正确包含浮动元素。`.left`和`.right`类选择器分别应用于左浮动和右浮动的元素，并使用`width`属性设置宽度为50%。
3.在<body>标签内编写HTML结构，以实现所需的Float布局。例如，可以创建一个包含左浮动和右浮动元素的布局：
html
<div class="left">
<!-- 左浮动的内容 -->
</div>
<div class="right">
<!-- 右浮动的内容 -->
</div>