CSS是一種強大的網頁樣式控制語言，可以控制各種元素的樣式，其中也包括插入的圖片的位置。 在HTML中，使用img元素插入圖片，圖片默認會在文檔流中按照其出現的位置進行排版。但在實際開發中，我們可能需要改變圖片的位置，例如讓圖片居中或者緊貼某一個元素。這時候，CSS就派上了用場。 使用CSS控制圖片位置有兩個主要的方法，分別是使用浮動（float）和位置（position）屬性。 首先介紹浮動屬性。浮動可以使元素脫離文檔流，并圍繞其他元素排布。我們可以通過給圖片設置float:left或float:right屬性，讓圖片在文本流中左右排布。例如下面的代碼：

img {
float: left;
}

這樣，圖片就會在文本的左側浮動。同樣地，我們也可以用float:right設置圖片右浮動。 但是，浮動屬性也可能會造成頁面布局的混亂。如果沒有清除浮動，那么頁面的其他元素可能會亂流，而且頁面高度也無法自動調整。我們可以使用clear屬性來防止這種情況的出現：

.clearfix::after {
content: "";
clear: both;
display: block;
}

在上面的代碼中，我們使用了類名clearfix。這是一個經典的CSS hack，它可以清除浮動帶來的影響。我們使用了偽元素::after來插入一個空元素，然后設置clear:both讓其放置在浮動元素下方，并且從新的一行開始。 另一種控制圖片位置的方法是使用位置屬性。通過設置元素的position屬性為absolute或fixed，我們可以讓其脫離文檔流，并且相對于其父元素或瀏覽器窗口進行定位。例如下面的代碼：

img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}

上面的代碼將圖片絕對定位于其父元素中心，使用了top和left屬性對圖片進行位置調整。但是，由于定位元素脫離了文檔流，可能會對頁面布局帶來影響，需要特別注意。 綜上所述，CSS控制插入圖片位置的方法主要有兩種：浮動和位置屬性。選擇合適的方法取決于具體的需求和頁面結構，需要結合實際情況進行權衡。同時，我們需要注意避免因為浮動而導致的頁面混亂，或者因為絕對定位脫離文檔流而帶來的布局問題。