CSS（Cascading Style Sheets）是網頁制作中很重要的一個組成部分，它是用來對網頁進行樣式美化的。

在網頁中，經常需要將圖片排列起來，讓網頁更加美觀。那么，如何使用CSS來實現圖片的排列呢？下面我們就來學習一下吧！

/* CSS代碼 */
img {
float: left; /* 讓圖片浮動到左側 */
margin: 10px; /* 為圖片添加10px的外邊距 */
}
.clearfix::after {
content: "";
display: block;
clear: both; /* 清除浮動 */
}

代碼解釋：

首先，我們使用了`float`屬性來讓圖片浮動到左側。`float`屬性有三個值：`left`、`right`和`none`。其中，`left`表示元素浮動到左側；`right`表示元素浮動到右側；`none`表示不浮動，即不影響文檔流。我們在這里選擇了`left`，讓圖片沿左側浮動。

接著，我們使用了`margin`屬性為圖片添加了10px的外邊距。`margin`屬性用來設置元素的外邊距，可以分別設置上、右、下、左四個方向的邊距值。這里我們只設置了左右兩個方向的邊距值。

最后，我們定制了一個清除浮動的類，使得浮動元素不影響下方元素的排布。在這里我們使用了偽元素`::after`，用來在元素的最后添加內容。`clear: both`表示清除浮動，讓下方的元素不會受到浮動元素的影響。

在使用以上代碼后，我們只需要將所有的圖片添加上`img`標簽，就可以實現圖片的排列了。同時，為了避免被浮動元素影響，我們還需要為容器添加上清除浮動的類，例如：

<div class="clearfix">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>

以上就是如何使用CSS對圖片進行排列的簡單介紹。當然，我們還可以結合其他屬性，如`display: flex`和`display: grid`等，來實現更加靈活多變的排列效果。