浮动时文档流的怪现象

mingzi520 2009-07-30 04:59:55

我们知道，如果给某个元素设置了浮动，那么由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。就像下面这样子

不浮动时

浮动后第二个div被第一个盖住了

再看下面这段代码



<html>

<head>

<style type="text/css">

div{

	border:1px dashed red;

	background-color:#ccc;

	width:100px;

	height:100px;

}

div.myfloat{

	float:left

}

</style>

</head>

<body>

<div class="myfloat">div#1</div>

<div>div#2</div>

<div>div#3</div>

<div>div#4</div>

</body>

</html>

显示如下：

问题：上面第二个div块被盖住了，为什么他的文字部分没有盖住（看到重叠文字部分了吗?）！

...全文

99 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

ddcatlee 2009-07-31

打赏
举报

http://www.w3.org/TR/CSS21/visuren.html#propdef-float

夜雨_Jason 2009-07-31

打赏
举报

或许这就是FF对CSS的解释就是这样的
另外浮动会产生很多问题，所以一般我们都要做到有浮必清

夜雨_Jason 2009-07-31

打赏
举报

是个问题，好好研究一下先

mingzi520 2009-07-31

打赏
举报

[Quote=引用 11 楼 ddcatlee 的回复:]
http://www.w3.org/TR/CSS21/visuren.html#propdef-float
[/Quote]

一个浮动元素的框可以覆盖常规流向中其它的框。如果它覆盖的是一个行内框，该行内框的内容、背景和边框在该浮动前面渲染。如果覆盖的是一个块框，块框的背景和边框在浮动后面渲染，并只有在浮动为透明时才可见。块框的内容在浮动前面渲染。

chokobo 2009-07-31

打赏
举报

感觉是文字围绕在浮动框周围的效果，但是奇怪的是这个浮动框和文字根本不在同一个父框里啊，有点不解。

mingzi520 2009-07-30

打赏
举报

这里还有另外一个例子

<html>

<head>

<style type="text/css">

div.hello{

	background:#003366;

	color:#fff;

}

div.myfloat{

	float:left;

	border:1px dashed red;

	background-color:#ccc;

	width:100px;

	height:100px;

	overflow:hide;

	margin-left:10px;

}

</style>

</head>

<body>

<div class="myfloat">div.myfloat</div>

<div class="hello">这个div穿透div.myfloat,而文字部分却没有被遮住</div>

</body>

</html>