通过利用 CSS 的 display 和 float 属性可以制作两栏式 HTML 页面：建立一个父容器（使用 display: flex）；在容器中添加两个代表栏的子元素；设置栏的宽度（使用 width 属性）；设置栏浮动（使用 float 属性）。
如何制作两栏式 HTML 页面
要制作两栏式 HTML 页面，可以使用 CSS 的 display 和 float 属性。
1. 使用 display 创建容器
创建一个父容器元素，例如 <div>，并使用 display: flex 设置其显示方式。
立即学习“前端免费学习笔记（深入）”；
<code class="html"><div class="container"> ... </div></code>
2. 添加子栏
在容器内创建两个子元素（例如 <div>），代表两栏。
<code class="html"><div class="container"> <div class="left-column"></div> <div class="right-column"></div> </div></code>
3. 设置栏宽
使用 width 属性设置栏宽。对于固定宽度的栏，可以使用百分比值或像素值。
<code class="css">.left-column {
width: 60%;
}
.right-column {
width: 40%;
}</code>4. 设置栏浮动
要使栏浮动并排显示，请使用 float 属性。将左栏设置为向左浮动，右栏设置为向右浮动。
<code class="css">.left-column {
float: left;
}
.right-column {
float: right;
}</code>完整示例:
<code class="html"><!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
}
.left-column {
float: left;
width: 60%;
}
.right-column {
float: right;
width: 40%;
}
</style>
</head>
<body>
<div class="container">
<div class="left-column">
...
</div>
<div class="right-column">
...
</div>
</div>
</body>
</html></code> 
