1、两列布局

（1）概念

经典两列布局是指一种网页布局方式，其中一列宽度固定，另一列宽度自适应。‌ 这种布局方式在网页设计中非常常见，因为它能够提供良好的视觉效果和用户体验。

如图所示：

页面顶部放置一个大的导航或广告条，左边是主页示意栏，右边则是具体内容或文章，下面还有点赞栏

此类网页布局的两列都有固定的宽度，而且从内容上很容易区分主要内容区域和侧边栏。页面布局整体分为上、中、下3个部分，即header区域、container区域和footer区域。其中，container又包含mainBox（主要内容区域）和sideBox（侧边栏）

示意图如下：

图源网络

（2）实现方法

利用我们之前学习的CSS盒子模型的浮动属性（float） ，将元素向左或向右浮动，另一个元素则自动环绕在其周围，从而实现两列布局

eg：

运行代码：

仅供大家参考

2、三列布局

经典三列布局是指一种页面布局方式，其中包含三列，左右两列宽度固定，中间一列宽度自适应。‌ 这种布局方式在许多网站的首页中广泛应用。

对于三列布局，浏览者的注意力最容易集中在中间栏的信息区域，其次才是左、右两侧的信息

三列布局示意图：

图源网络

eg:

运行代码：

大家可以运行感受一下

3、 多行多列布局

多行多列布局是一种网页布局方式，可以将内容分为多个列进行展示，在水平方向上进行排列。‌ 这种布局方式允许内容在不同的列中展示，使得页面看起来更加丰富和有层次感。多行多列布局在各大电商网站和素材网站中非常常见

实例：

eg：

运行代码：

几列布局都相似的，大家可以动手试试多加几列的效果

4、百分比布局

（1）概念

上面的网页各个板块都是精准地定位，会让编写者十分头疼具体位置到底是多少，需一个个尝试才能达到我们想要的效果，为了使这种问题解决，我们可以使用百分比布局

在网页设计中，百分比布局是一种非常灵活的布局方式。它可以让网页元素根据浏览器窗口的大小自动调整尺寸，从而适应不同的屏幕尺寸和设备

（2）优势

响应式设计

百分比布局能够使网页在不同尺寸的屏幕上都能良好地显示，无需为每个设备单独设计布局。

灵活性

可以轻松地调整元素的大小和位置，以适应不同的布局需求。

易于维护

当需要修改网页布局时，只需要调整百分比值，而不需要修改每个元素的固定尺寸。

（3）语法格式

学会这个内容加上之前学习的内容，大家可以做出自己喜欢的网页了！