你的位置:首页 > 网页设计

[网页设计]为什么浮动能实现文字环绕图片而不会重叠


今天看图解CSS的章节,虽然主要讲的是nth-of-type选择器的使用,但是本人却关注到了页面的排版方式,如下:

HTML

<body>	<div >		<img src="http://img.ujian.cc/nice/35.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://img.ujian.cc/nice/36.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://img.ujian.cc/nice/38.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>

 效果:

百思不得其解,所以又看了大神张鑫旭的文章,其中有一句话是这么说的“浮动的破坏性在于切断line box链,致使高度塌陷,但由于浮动元素仍在DOM tree中,实体是看得见摸得着的,所以其占据的实体位置还是在的。”
因此得出的结论就是(引用下面回复者的):
“脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。而对于使用absolute positioning脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。”
这样看来盒子内的内容也很重要啊!