我设置在中间设置浮动为什么上面及下面的元素没有受浮动的影响啊？我还想练练清楚浮动呢，是不是哪里写错了

#bao{width:960px;margin:0 auto}

#shang{height:200px;background:#ccc;}

#zhong{height:800px;background:#ddd;}

#xia{height:200px;background:#369;}

.yi{width:400px;height:300px;background:#369;float:left;}

.er{width:500px;height:600px;background:red;float:right;}

</style>

</head>

<body>

<div id="shang">wwwwwww</div>

<div class="er">right</div>

eeeeeeee</div>

<div id="xia">rrrrrrrrr</div>

</div>

</body>

</html>

qq_閆埜_03724478

2016-08-13

源自：网页布局基础 3-3

关注问题我要回答

1070

操作

收起

3 回答

慕少7532173
2016-10-24

老师的理论并没有错误。楼主只是因为在.zhong设置了height：800px而已，既然已经设置了高度，里面的浮动元素自然对下面的元素没有影响。你可以删除height：800px，就会看到浮动的影响。

0 回复有任何疑惑可以回复我~

收起回答

慕侠5947235
2016-08-16

这个老师的理论有误，浮动是脱离文档流的，当浮动的元素脱离文档流时，紧跟在后面的一个元素会顶上去重新形成一个文档流，并不是说一定会影响上面下面的元素。。

0 回复有任何疑惑可以回复我~

收起回答

慕少7532173

老师的理论并不是有错误。浮动的所谓"脱离文档流"其实并不是完全脱离普通文档流，W3C中关于浮动的理解应该为“普通的块级文档流在它前面的浮动元素渲染完成后，表现的会像它前面的浮动元素不存在一样”。这里有一点需要注意，就是普通的块级文档流才这样表现，如果是内联元素，比如说<p>，它里面的文字会环绕在浮动元素周围。所以说浮动并不是完全脱离普通文档流。这并不是float的bug,因为float设计之初就是仅仅为了实现文字的环绕效果，只是后来人们开发过程中发现可以使用float来实现布局而已。另外，position：absolute跟float相比，absolute更猛，它会完全脱离文档流。

2016-10-24 回复有任何疑惑可以回复我~

qq_閆埜_03724478 提问者
2016-08-13

<!DOCTYPE HTML>

<html>

<head>

#bao{width:960px;margin:0 auto}

#shang{height:200px;background:#ccc;}

#zhong{height:800px;background:#ddd;}

#xia{height:200px;background:#369;}

.yi{width:400px;height:300px;background:#369;float:left;}

.er{width:500px;height:600px;background:red;float:right;}

</style>

</head>

<body>

<div id="shang">wwwwwww</div>

<div class="er">right</div>

eeeeeeee</div>

<div id="xia">rrrrrrrrr</div>

</div>

</body>

</html>

这是我的自己写的，怎么回事啊

0 回复有任何疑惑可以回复我~

收起回答

0/150

提交

取消

网页布局基础

参与学习 214707 人
解答问题 1756 个

让你精通CSS中三大定位机制，彻底掌握网页布局的相关知识

进入课程

我设置在中间设置浮动为什么上面及下面的元素没有受浮动的影响啊？我还想练练清楚浮动呢，是不是哪里写错了

我要回答关注问题

热搜

最近搜索清空

我设置在中间设置浮动为什么上面及下面的元素没有受浮动的影响啊？我还想练练清楚浮动呢，是不是哪里写错了

3 回答

我设置在中间设置浮动为什么上面及下面的元素没有受浮动的影响啊？我还想练练清楚浮动呢，是不是哪里写错了