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

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

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

1. 父容器沒(méi)有清除浮動(dòng)。

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

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

2. 圖片寬度超過(guò)父容器寬度。

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

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

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

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