CSS 实现两列布局主要有以下几种常见的方法：
一、浮动布局实现两列布局
基本原理：利用float属性让两个列元素分别向左或向右浮动，从而实现两列并排排列的效果。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.left-column {
float: left;
width: 30%;
background-color: lightblue;
}
.right-column {
float: right;
width: 70%;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="left-column">
<p>这是左侧列的内容。</p>
</div>
<div class="right-column">
<p>这是右侧列的内容。</p>
</div>
</body>
</html>
在上述代码中首先定义了两个类.left-column和.right-column分别用于设置左右两列的样式。对于左侧列.left-column，设置float: left使其向左浮动，并且指定宽度为30%，同时设置了一个背景颜色便于查看效果。对于右侧列.right-column，设置float: right使其向右浮动，宽度为70%，也设置了相应的背景颜色。
二、弹性盒布局实现两列布局
基本原理：通过将父容器的display属性设置为flex，然后利用flex相关属性来控制两列元素在容器内的排列方式
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.container {
display: flex;
}
.left-column {
width: 30%;
background-color: lightblue;
}
.right-column {
width: 70%;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="container">
<div class="left-column">
<p>这是左侧列的内容。</p>
</div>
<div class="right-column">
<p>这是右侧列的内容。</p>
</div>
</div>
</body>
</html>
在上述代码中首先创建了一个类为.container的父容器，并将其display属性设置为flex，这样就启用了弹性盒布局模式。然后分别定义了.left-column和.right-column两个类用于左右两列的样式设置。这里只需设置两列各自的宽度和背景颜色等属性即可，弹性盒布局会自动根据设置将两列在水平方向上并排排列
三、网格布局实现两列布局
基本原理：将父容器的display属性设置为grid，通过定义网格的列数和各列的宽度等属性来实现两列布局效果。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.container {
display: grid;
grid-template-columns: 30% 70%;
}
.left-column {
background-color: lightblue;
}
.right-column {
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="container">
<div class="left-column">
<p>这是左侧列的内容。</p>
</div>
<div class="right-column">
<p>这是右侧列的内容。</p>
</div>
</div>
</body>
</html>
在上述代码中先创建了一个类为.container的父容器，将其display属性设置为grid以启用网格布局模式。接着通过grid-template-columns: 30% 70%定义了网格的两列，第一列宽度占容器的 30%，第二列宽度占容器的 70%。最后分别给左右两列设置了背景颜色等样式，两列会按照网格布局的设置在容器内排列。
例子：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>典型的网页结构示例:带横向导航栏</title>
<style>
nav ul{
height:30px; /*给父盒设置高度，避免高度塌陷影响其他兄弟盒*/
background-color: aquamarine;
}
nav ul li{
margin-right: 20px;
float:left;
}
#contact{
width: 220px;
height: 160px;
background-color: pink;
border: 2px black solid;
position: fixed;
left:1100px;
top:500px;
}
section{
width: 100%;
background-color: rgb(243, 192, 255);
border: 20px black solid;
}
<!--主要意义是做一个大盒子 -->
article{
width: 70%;
height: 500px;
background-color: red;
border: 2px black solid;
float: left;
}
aside{
width: 25%;
height: 500px;
background-color: green;
border: 2px black solid;
float: left;
margin-left: 2%;
}
footer{
width: 100%;
height: 10%;
background-color: rgb(243, 192, 255);
border: 2px black solid;
}
</style>
</head>
<body>
<header>
<h1 align="center">周生如故</h1>
<p align="center">主演: <ins>白鹿、任嘉伦</ins></p>
<hr>
<nav>
<ul type="none">
<li><a href="#">剧情简介</a></li>
<li><a href="#">演员表</a></li>
<li><a href="#">人物结局</a></li>
<li><a href="#">人物关系表</a></li>
</ul>
</nav>
</header>
<hr>
<main>
<section>
<article>
<h3>台词</h3>
<p>辰此一生<br>不负天下<br>为负十一</p>
<br><br><br>
<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.cMMMyq35XoVVgk2Bn-4v2wHaKI?w=208&h=285&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="" width="150" height="200">
<p>想了解更多<a href="https://weibo.com/u/5215482174">点击这里</a></p>
</article>
<aside>
<h3>侧边栏</h3>
<p>各演员信息</p>
<table border="1">
<tr>
<th>人物介绍</th>
<th>链接</th>
</tr>
<tr>
<td>周生辰</td>
<td><a href="1.2\周生辰.html">人物介绍</a></td>
</tr>
<tr>
<td>漼时宜</td>
<td><a href="1.2\漼时宜.html">人物介绍</a></td>
</tr>
</table>
</aside>
<div style="clear: both;"></div>
<!--没有什么实际意义，只是为了清除浮动 -->
</section>
<section id="contact">
<h4>是否想了解更多花絮</h4>
<form>
是/否
<input type="text" id="name" name="name"><br>
更多建议
<input type="email" id="email" name="email"><br>
<input type="submit" value="提交">
</form>
</section>
</main>
<hr>
<footer>
<p>版权所有©作者</p>
</footer>
</body>
</html>
运行结果：
下面是最原始的代码运行截图：
三列布局
上述三种方法也同样可以实现三列布局
以下是将上述例子的两列布局改成三列布局的代码：
(注：红色的字体为两列布局的代码)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>典型的网页结构示例:带横向导航栏</title>
<style>
.clearfix::after {
content: "";
display: block;
clear: both;
}
<!-- 采用更简洁有效的方式来处理清除浮动，这里使用伪元素来清除浮动 -->
nav ul {
height: 30px;
/*给父盒设置高度，避免高度塌陷影响其他兄弟盒*/
background-color: aquamarine;
}
nav ul li {
margin-right: 20px;
float: left;
}
article {
width: 30%;
height: 500px;
background-color: red;
border: 2px black solid;
float: left;
margin-right: 2%;
}
<!--article{
width: 70%;
height: 500px;
background-color: red;
border: 2px black solid;
float: left;
}-->
aside {
width: 30%;
height: 500px;
background-color: green;
border: 2px black solid;
float: left;
margin-right: 2%;
}
<!--aside{
width: 25%;
height: 500px;
background-color: green;
border: 2px black solid;
float: left;
margin-left: 2%;
}-->
#contact {
width: 30%;
height: 500px;
background-color: pink;
border: 2px black solid;
float: left;
}
<!--#contact{
width: 220px;
height: 160px;
background-color: pink;
border: 2px black solid;
position: fixed;
left:1100px;
top:500px;
}-->
<!--目前
article、aside和contact（这里可理解为第三列相关内容） 的宽度设置虽然有一定占比，但可以进一步优化使其更符合典型的三列布局比例分配，并且保证它们在同一行显示且总宽度不超过父元素宽度（通常是main元素或其包含的相关容器元素）。假设我们希望三列布局较为均匀地分布，可将article、aside和contact的宽度分别设置为30%、30%和30%（可根据实际需求微调比例），同时为了让它们之间有一定间隔，可以给每列设置合适的margin值-->footer {
width: 100%;
height: 10%;
background-color: rgb(243, 192, 255);
border: 2px black solid;
}
</style>
</head>
<body>
<header>
<h1 align="center">周生如故</h1>
<p align="center">主演: <ins>白鹿、任嘉伦</ins></p>
<hr>
<nav>
<ul type="none">
<li><a href="#">剧情简介</a></li>
<li><a href="#">演员表</a></li>
<li><a href="#">人物结局</a></li>
<li><a href="#">人物关系表</a></li>
</ul>
</nav>
</header>
<hr>
<main>
<section class="clearfix">
<!--确保需要清除浮动效果的父元素（如包含文章、侧边栏和联系我们部分的
section元素）应用了这个类--><article>
<h3>台词</h3>
<p>辰此一生<br>不负天下<br>为负十一</p>
<br><br><br>
<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.cMMMyq35XoVVgk2Bn-4v2wHaKI?w=208&h=285&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="" width="150" height="200">
<p>想了解更多<a href="https://weibo.com/u/5215482174">点击这里</a></p>
</article>
<aside>
<h3>侧边栏</h3>
<p>各演员信息</p>
<table border="1">
<tr>
<th>人物介绍</th>
<th>link</th>
</tr>
<tr>
<td>周生辰</td>
<td><a href="1.2\周生辰.html">人物介绍</a></td>
</tr>
<tr>
<td>漼时宜</td>
<td><a href="1.2\漼时宜.html">人物介绍</a></td>
</tr>
</table>
</aside>
<section id="contact">
<h4>是否想了解更多花絮</h4>
<form>
是/否
<input type="text" id="name" name="name"><br>
更多建议
<input type="email" id="email" name="email"><br>
<input type="submit" value="提交">
</form>
</section>
</section>
</main>
<hr>
<footer>
<p>版权所有©作者</p>
</footer>
</body>
</html>
运行截图：
多行多列
根据上面的例子，我们可以得知，要实现多行多列的话，首先需要清除浮动，再把需要分列的width和height设置好所占网页的大小（最主要是设置好width的参数）就可以实现多行多列的结构啦！
如果列之间不需要间距的话，可以不设置margin这个属性哦！！！！
（注：原始代码和上述代码其他用法作者前几篇有写）
