在網頁設計中，圖片是不可或缺的元素，但是往往會給文檔流帶來不必要的麻煩。為了解決這個問題，我們可以使用CSS將圖片從文檔流中剝離出來，讓它們在視覺上獨立。

img {
display: block;
margin: 0 auto;
}

以上代碼可以讓圖片不再與文本在同一行內顯示，而是自己單獨占據一行。同時，我們還為圖片添加了居中對齊的樣式，這樣可以讓圖片在視覺上更加美觀。

另外，我們還可以使用CSS的background-image屬性來實現圖片不占文檔流。在這種情況下，我們需要將圖片作為元素的背景圖像來顯示。

div {
background-image: url("example.jpg");
background-size: cover;
width: 100%;
height: 300px;
}

以上代碼將一個div元素的背景圖像設置為example.jpg，并將它的寬度設置為100%，高度設置為300px。我們還使用了background-size屬性來讓背景圖片隨著元素的大小而調整。這樣一來，圖片就完全脫離了文檔流。

不過需要注意的是，在使用背景圖像時，我們需要為元素添加足夠的寬度和高度，否則圖片將無法正確顯示。

總之，CSS提供了多種方法來實現圖片不占文檔流。我們可以選擇根據實際情況選擇合適的方法，提高網頁的可讀性和美觀度。