浮動的盒子對img的影響

m0_51629205發表於2020-11-22

浮動只對下面的標準流盒子起作用,讓其浮動的盒子壓住下面的標準流盒子

示例1:在這裡插入圖片描述
讓第一個盒子div1左浮動,第二個盒子就會移上去被div1盒子壓住。

示例2:在這裡插入圖片描述
給第二個盒子一個左浮動,圖片並沒有像我們想象的那樣被div2壓住,而是併成一排排布。
或者又是因為圖片為行內元素的原因,所以在此再給圖片一個display: block;
在這裡插入圖片描述
結果還是併成一排顯示。

示例3:在這裡插入圖片描述
前面的例子對盒子進行浮動測試發現,盒子與盒子之間浮動的壓住與被壓住的情況以及圖片並不會隨著盒子的浮動而被壓住,而是並排顯示。那麼我們再對圖片進行浮動進行測試,當給定圖片一個左浮動:
在這裡插入圖片描述

觀察可知第3個盒子div3被圖片壓住。

由此可得出結論:當給盒子一個浮動,盒子後面的圖片並不會出現被壓住的情況,而是並排顯示。
當給圖片一個浮動時,圖片後面的盒子出現了被壓住的情況,與盒子浮動和盒子不浮動的情況一樣。

相關文章