浮动(float)与文档流(normal flow)

最新推荐文章于 2021-03-20 19:48:51 发布

iteye_12858

最新推荐文章于 2021-03-20 19:48:51 发布

阅读量234

点赞数

分类专栏： html 文章标签： html

html 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

根据规范来看,float的元素应该脱离文档流才对.
原文说
In the float model, a box is first laid out according to the normal flow, then
[b][color=red]taken out of the flow[/color][/b] and shifted to the left or right as far as possible.

看下面的代码


.div2 {
	width: 200px;
	height: 100px;
	float: left;
	border-style: solid;
}

.div3 {
	width: 400px;
	height: 50px;
	background-color: silver;
}

.main {
	width: 650px;
	border: 1px solid;
}

以及


<body>
	<div class="main">
		<div class="div2">div2</div>
		<div class="div3">div3</div>
	</div>
</body>

FF下很明显可以看出div2已经不在文档流里了,因为div3的布局无视了div2的存在.(尽管div3里的内容是贴着div2的)
[img]http://dl.iteye.com/upload/picture/pic/121226/4b48215e-0db9-36b7-98e6-bdd408c9771e.jpg[/img]
IE7则不然,div2依然大摇大摆的在文档流里占据着位置
[img]http://dl.iteye.com/upload/picture/pic/121228/1f0cc79c-8658-3d60-a133-79fb52c2c022.jpg[/img]

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

iteye_12858

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动(float)与文档流(normal flow)

根据规范来看,float的元素应该脱离文档流才对. 原文说In the float model, a box is first laid out according to the normal flow, then[b][color=red]taken out of the flow[/color][/b] and shifted to the left or right as far...
复制链接

扫一扫