CSS中，圖片自動換行是一個常見的問題，如果不注意布局，會導致圖片排版亂糟糟的，影響美觀。在解決這個問題前，我們先了解一下CSS中圖片自動換行的基本原理。

img {
max-width:100%;
height:auto;
}

如上所示，第一步就是給圖片設置一個最大寬度為100%，高度自動適應。接下來是怎樣控制圖片的位置呢？

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

將圖片設置為左浮動并設置其右側的間距，可以使圖片自動排列并對齊。

但是，這還不夠。當圖片太多時，我們又該怎么辦呢？此時，CSS的偽元素:after派上了用場。通過在每行圖片最后一個元素上添加一個隱藏的偽元素，我們可以清除浮動并使下一行的圖片排列正常。

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

代碼如上，給父元素添加clearfix類，同時使用偽元素添加樣式，就能輕松實現圖片自動換行了。