?圖片加浮動(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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>
<div class="test-box">
? ? <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>
2017-03-19
浮動(dòng)的破壞性,設(shè)置浮動(dòng)后,父級(jí)的高度會(huì)塌陷,浮動(dòng)的元素會(huì)移動(dòng),文字會(huì)重新形成一個(gè)box環(huán)繞浮動(dòng)的圖片。