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

?圖片加浮動(dòng)后，他后面的文字會(huì)實(shí)現(xiàn)環(huán)繞效果

圖片加浮動(dòng)后，他后面的文字會(huì)實(shí)現(xiàn)環(huán)繞效果，但當(dāng)圖片后緊跟div的時(shí)候，div會(huì)在圖片后面（div占據(jù)圖片浮動(dòng)以前的位置），為什么文字不會(huì)占據(jù)圖片浮動(dòng)之前的位置，而是出現(xiàn)環(huán)繞效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>浮動(dòng)的原本作用-文字環(huán)繞</title>

<style>

.test-box { width: 600px; margin: 16px auto; line-height: 1.5; font-size: 14px; }

.float-left { float: left; margin: 0 10px 5px 0; }

.red { width:400px; height:200px; background-color:#f00;}

</style>

</head>

<body>

? ? <img src="http://img1.sycdn.imooc.com//53d60af3000171a002560191.jpg" class="float-left"/>

? ? <div class="red"></div>

? ? <p>一直有這么一個(gè)美麗的誤會(huì)，說我是張含韻的忠實(shí)粉絲，因?yàn)樽筮呥@種張含韻蘿莉時(shí)候的照片頻繁出現(xiàn)在我的文章中。</p>

? ? <p>實(shí)際上，當(dāng)年，我還在念大學(xué)那會(huì)兒，我就把我收藏的一些美女照片調(diào)成成固定的幾個(gè)比例，專門用來做演示使用。</p>

? ? <p>分別是128像素，256像素，512像素和原圖。然后，非常巧合的是，這些示例圖片中序號(hào)為1的妹子，就是張含韻。因此，只要有圖片演示，無論是使用了1張還是10張，張含韻小妹妹自然都會(huì)出現(xiàn)。久而久之，大家都認(rèn)為我是張含韻的忠實(shí)粉絲。</p>

? ? <p>然而，事實(shí)是什么呢？</p>

? ? <p>事實(shí)是，尼瑪我以前還真的是張含韻的忠實(shí)粉絲，上大學(xué)那會(huì)兒，唯一關(guān)注的新浪名博就是張含韻的博客。不過現(xiàn)在嘛，普通粉絲，普通粉絲。</p>

</div>

</body>

</html>