首頁 > 開發者 > JavaScript
為什麼浮動能實現文字環繞圖片而不會重疊，浮動環繞
今天看圖解CSS的章節，雖然主要講的是nth-of-type選取器的使用，但是本人卻關注到了頁面的排版方式，如下：
HTML
<body><div class="article"><img src="http://www.bkjia.com/uploads/allimg/160710/161HW950-0.jpg" alt="" /><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><img src="http://www.bkjia.com/uploads/allimg/160710/161HW044-1.jpg" alt="" /><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><img src="http://www.bkjia.com/uploads/allimg/160710/161HQM4-2.jpg" alt="" /><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div></body>
CSS
<style type="text/css">.article {width: 500px;margin: 20px auto;}.article img:nth-of-type(odd){float: left;margin-right: 10px;}.article img:nth-of-type(even){float: right;margin-left: 10px;}</style>
效果：
然後百思不得其解，因為img本身為行內元素，加了float之後變成了inline-block元素，兼有塊狀元素與行內元素的“氣質”，但緊跟在其後面的p元素是真真的塊狀元素，當img浮動之後會脫離標準文檔流，那麼p元素會上移，按照經驗文字部分會有一部分和img重疊（想象float後的元素都是漂浮在文檔流之上的），然並重（然而並沒有重疊）。在Firefox中用FixfireBUG查看，發現在img浮動之後p元素確實上移了（而不是右浮動了），而且從藍色邊框可以看出來，p元素佔據了整個box如：百思不得其解，所以又看了大神張鑫旭的文章，其中有一句話是這麼說的“浮動的破壞性在於切斷line box鏈，致使高度塌陷，但由於浮動元素仍在DOM tree中，實體是看得見摸得著的，所以其佔據的實體位置還是在的。”因此得出的結論就是(引用下面回複者的)：“脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。需要注意的是，使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會為這個元素讓出位置，環繞在周圍。而對於使用absolute positioning脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視它。”這樣看來盒子內的內容也很重要啊！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
