CSS布局技術經歷了多年的發展，不斷演進。早期的HTML頁面設計，主要采用table布局，這種方式非常麻煩，效果也不好。為了解決這個問題，CSS布局逐漸成為了前端開發的重要技術。以下是CSS布局技術的變遷綜述：

/* float布局 */
float: left;
float: right;

早期的CSS布局主要使用float屬性來實現多列布局。它的優點是簡單易懂，但是也存在許多不足，比如無法實現等高布局以及清除浮動的問題。使用float布局時，需要注意IE6的兼容性問題。

/* 三欄布局 */
#left{
float: left;
width: 200px;
}
#middle{
margin: 0 220px;/*左右兩欄寬度之和*/
}
#right{
float: right;
width: 200px;
}

清除浮動可以使用clearfix方法，也可以使用CSS3的clearfix解決方案，即使用::after偽元素。

/* inline-block布局 */
div{
display: inline-block;
width: 33%;
}

接下來，CSS布局的中心變得越來越重要，人們需要更靈活的布局技術。inline-block布局以其簡潔、靈活的特點而備受青睞。這種布局方式可以輕松實現等高布局，但是需要注意子元素之間的間隙問題。

/* flexbox布局 */
.container{
display: flex;
justify-content: space-between;
}

flexbox布局是CSS3中的新特性，它可以解決許多以前布局方式存在的問題。flexbox可以定義彈性元素的尺寸，同時也可以調整彈性元素之間的空間分配，還能夠動態的調整元素的排列順序。它的缺點是兼容性不佳，需要考慮到老舊瀏覽器的兼容性問題。

/* grid布局*/
.container{
display: grid;
grid-template-columns: repeat(3, 1fr);
}

grid布局是最新的CSS3布局方式，它具有極高的靈活性和可用性。grid布局可以用來實現復雜的網格布局，比如實現媒體瀑布流效果。不同于flexbox布局，grid布局可以實現一維和二維的布局。它的缺點是兼容性問題。

總之，CSS布局技術在不斷地變遷和演化，每種方法都有其獨特的優點和局限。根據實際需求選擇布局方式才是王道。