CSS列布局和瀑布流布局都是现代Web设计中非常重要的技术。这两种布局都是通过CSS属性和值来定义页面元素的排版方式。CSS列布局是一种基于普通矩形框的布局，可以处理单列布局和多列布局。而瀑布流布局则是一种特殊的多列布局，它采用一种类似瀑布的布局方式，使得页面元素可以在不同高度的列中呈现。

/*CSS列布局*/
.single-column-layout {
display: block;
width: 100%;
}
.multi-column-layout {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
/*瀑布流布局*/
.waterfall-layout {
column-count: 3;
column-gap: 10px;
}
.waterfall-layout .item {
display: inline-block;
margin-bottom: 10px;
width: 100%;
}

在CSS列布局中，我们可以使用display属性来定义页面元素的布局方式。对于单列布局，我们可以使用block值，让元素在一列中呈现；对于多列布局，我们可以使用flex布局，让元素在多行多列中呈现。

在瀑布流布局中，则需要使用column属性来定义列数和列间距，同时通过display属性和宽度来定义每个元素的呈现方式和宽度。瀑布流布局适合呈现大量图片和卡片等元素，可以提高页面的视觉效果和用户体验。