CSS是前端開發中必不可少的一部分，它不僅能夠控制網站的樣式，還可以修改和優化網頁的布局。在大多數情況下，網站中的內容都需要進行排列和組織。而當布局中存在高度不同的元素時，該如何排列呢？

這時候就需要使用到CSS中的浮動屬性了。浮動可以讓元素脫離文檔流，并且讓元素以獨立塊級元素的形式呈現。這個屬性對于排列高度不同的元素非常有用。比如，如果你想要讓幾個元素從左到右排列，并且元素的高度不一樣，可以使用下面的CSS代碼：

.item{
 float: left;
 margin-right: 10px;
}

上述代碼將元素設置成浮動屬性，讓元素從左到右排列。排列中的相鄰元素之間有10px的空白間隔。

然而，當元素高度不一樣時，浮動排列可能會出現奇怪的結果。相鄰元素之間的空白間隔可能會出現排版問題，因為較短元素的下方會有明顯的空白間隔。為了解決這個問題，可以使用下面的代碼：

.item{
 float: left;
 margin-right: 10px;
 height: 200px;
 display: flex;
 align-items: flex-end;
}

這段代碼中，我們在CSS中增加了高度屬性，并且將容器元素的display屬性設置為flex。這使得容器元素中的元素將會水平排列，并且高度相等。flex容器的align-items屬性使得元素始終在底部對齊。這樣一來，我們就能夠排出高度不同的元素的排列了。