在web頁面開發(fā)中，我們經(jīng)常需要用到圖片來豐富頁面內(nèi)容。然而，在設(shè)置圖片的顯示位置時，有時候我們會發(fā)現(xiàn)圖片出現(xiàn)了一些問題。

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

以上代碼是一個常用的將圖片向左浮動并留出一定空隙的樣式。但是，有時候我們會發(fā)現(xiàn)圖片并沒有按照預(yù)期的位置顯示，它們可能會疊加在一起或者被覆蓋。這是因?yàn)槲覀儧]有考慮到以下幾個問題：

1. 父容器沒有清除浮動。

當(dāng)一個容器中包含浮動元素時，容器的高度無法被自動撐開，從而會導(dǎo)致布局混亂。解決這個問題的方法有很多，其中比較常用的是清除浮動，可以在父容器末尾添加一個clearfix樣式：

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

2. 圖片寬度超過父容器寬度。

在沒有設(shè)置圖片寬度的情況下，圖片的寬度默認(rèn)是原圖寬度。如果圖片寬度超過了父容器的寬度，那么它將會溢出容器，導(dǎo)致布局問題。解決這個問題的方法有兩種：一種是給圖片設(shè)置最大寬度為父容器的寬度；另一種是將圖片縮小至父容器寬度內(nèi)。具體代碼如下：

.left-img {
float: left;
margin-right: 10px;
max-width: 100%;
}
.left-img img {
max-width: 100%;
height: auto;
}

以上代碼中，我們先將圖片最大寬度設(shè)置為100%（即不超過父容器寬度），然后再將圖片的寬度設(shè)置為100%（保證寬度自適應(yīng)，高度自動計算）。

通過以上兩點(diǎn)注意事項(xiàng)，我們可以避免大部分布局問題，達(dá)到理想的顯示效果。