<!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=gb2312" /><title>无标题文档</title><style type="text/css">body{ margin:0; padding:0; text-align:center; font-size:40px; font-weight:bold}.top{ height:100px; background:#003366}.sup{ height:500px; width:200px; background:#33FF99;float:left}.zi{height:500px; background:#999999;margin:0 200px 0 200px}.apc{ height:500px;width:200px; background:#FF3399;float:right}.zhong{ height:100px;width:800px; background:#990066}.main{width:800px;height:500px; margin:0 auto}</style></head><body><div class="top">top</div><div class="main"><div class="sup">sup</div><div class="apc">apc</div><div class="zi">zi</div></div><div class="zhong">zhong</div></body></html>把如上代码复制打开，会发现<div class="main"><div class="sup">sup</div> （1）<div class="apc">apc</div> （2）<div class="zi">zi</div> （3）</div>中间的块级元素颜色依次是绿灰红， 为什么只有按顺序输入（1）（2）（3）才会显示这样的页面， 如果更改了1、2、3的顺序，网页显示中的DIV元素就会出现换行
2 回答
已采纳
小小小小哒
TA贡献6条经验 获得超6个赞
正常情况下，文档是普通流布局，也就是 （1）（2）（3）依次出现。然而你将（1）左浮动，（2）右浮动，这两个浮动的元素脱离了正常的流，所以（3）此时是正常流的第一个元素，能够丝毫不受影响地布局在第一行。
如果我们把html的顺序换一下，比如换成（1）（3）（2）， 布局的时候，（1）被左浮动了，（3）成为正常流的第一个元素，占满了整个第一行；然后轮到（2），第一行已经被（3）占满了，（2）只能到下一行，然后你设置了（2）右浮动，所以（2）到了第二行的右边。"zhong"就顺理成章地出现在了（2）的左边。
- 2 回答
- 0 关注
- 1563 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消