                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /CSS深入理解之float浮動(dòng)

關(guān)于IMG的問題

img放在P標(biāo)簽中不是也可以實(shí)現(xiàn)文字環(huán)繞的效果么。。。為什么當(dāng)初會(huì)想到另外搞出個(gè)float來

hei_yu_fa

2015-11-05

源自：CSS深入理解之float浮動(dòng) 1-2

關(guān)注問題我要回答

1838

操作

收起

2 回答

李曉健回答被采納 +3 積分
2015-11-05

img放在P標(biāo)簽中是不會(huì)出現(xiàn)環(huán)繞效果，例如圖片在前面，文字在后面，結(jié)果會(huì)是圖片右邊只有一行字，其他的字都在圖片的下面，圖片的右邊除了一行字其他的地方是空白。如果圖片用了float：left ?圖片的右邊就會(huì)有多行字。當(dāng)圖片右邊高度都放滿字后，文字才會(huì)出現(xiàn)在圖片的下面。這才是真正的環(huán)繞效果。

1 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

hei_yu_fa 提問者

非常感謝！

2015-11-06 回復(fù) 有任何疑惑可以回復(fù)我~

#2

yuuuuuuuuuu

為什么我試了一下 <p class="float-left"><img src="http://img1.sycdn.imooc.com//53d60af3000171a002560191.jpg" /></p> 同樣可以實(shí)現(xiàn)環(huán)繞效果

2015-12-15 回復(fù) 有任何疑惑可以回復(fù)我~

#3

xy319733580 回復(fù) yuuuuuuuuuu

是不是<p>...</p>標(biāo)簽內(nèi)的內(nèi)容作為一個(gè)段落，將一張圖片放在此標(biāo)簽內(nèi)，就相當(dāng)于把這張圖片當(dāng)作一段文字來處理，是這樣嗎？

2016-02-23 回復(fù) 有任何疑惑可以回復(fù)我~

618463
2016-04-13

那是因?yàn)閕mg是行內(nèi)塊元素，但是加了float屬性后，就會(huì)變成塊元素，具有了塊狀元素的特征，而p是塊元素，自然就能出現(xiàn)環(huán)繞效果了；如果img放在p里面，首先后面的文字是肯定不能環(huán)繞的，也只有那p里面的文字會(huì)出現(xiàn)在圖片的右邊。

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答