多年来，CSS浮动一直是创建网站布局的一个挑剔但必要的组件。如果您的设计需要多列，则转向浮点数。这种方法的问题在于，尽管Web设计人员/开发人员在创建复杂的站点布局时表现出了令人难以置信的独创性，但CSS浮动从未真正意图以这种方式使用。
虽然浮动和CSS定位肯定会在未来许多年内在网页设计中占有一席之地，但包括CSS Grid和Flexbox在内的更新的布局技术现在为网页设计师提供了创建网站布局的新方法。另一种显示出巨大潜力的新布局技术是CSS Multiple Columns。
CSS Columns现在已经存在了几年，但是在旧浏览器（主要是旧版本的Internet Explorer）中缺乏支持使得许多Web专业人员不能在他们的生产工作中使用这些样式。
随着对旧版IE的支持的结束，一些网页设计师现在正在尝试新的CSS布局选项，包括CSS Columns，并发现他们使用这些新方法比使用浮动更多地控制。
CSS列的基础知识
顾名思义，CSS Multiple Columns（也称为CSS3多列布局）允许您将内容拆分为一定数量的列。您将使用的最基本的CSS属性是：
- 列数
- 柱隙
对于列计数，您可以指定所需的列数。柱间隙将是这些柱之间的沟槽或间距。浏览器将获取这些值并将内容均匀地拆分为您指定的列数。
在实践中，CSS多列的一个常见示例是将文本内容块拆分为多个列，类似于您在报纸文章中看到的内容。假设您有以下HTML标记（请注意，出于示例目的，我只放置一个段落的开头，而在实践中，此标记中可能会有多段内容）：
如果你然后写了这些CSS样式：
.content {-moz-column-count：3; -webkit-column-count：3;列数：3; -moz-column-gap：30px; -webkit-column-gap：30px;柱间隙：30px; }
此CSS规则将“内容”分区拆分为3个相等的列，它们之间的间隔为30像素。如果您想要两列而不是三列，则只需更改该值，浏览器就会计算这些列的新宽度，以均匀分割内容。请注意，我们首先使用vendor-prefixed属性，然后是非前缀声明。
这很容易，它以这种方式使用对于网站使用是有问题的。是的，您可以将一堆内容拆分为多个列，但这可能不是Web的最佳阅读体验，尤其是当这些列的高度低于屏幕的“折叠”时。
然后，读者必须向上和向下滚动才能阅读完整内容。尽管如此，CSS Columns的主要内容与您在此处看到的一样简单，它可以用来做更多的事情，而不仅仅是分割一些段落的内容 - 它确实可以用于布局。
CSS列的布局
假设您的网页内容区域包含3列内容。这是一个非常典型的网站布局，为了实现这三个列，您通常会浮动其中的分区。使用CSS多列，它会更容易。
这是一些示例HTML：
