猿问

关于网页布局的问题

<!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元素就会出现换行

慕粉3361053
浏览 1564回答 2
2回答

小小小小哒

正常情况下,文档是普通流布局,也就是 (1)(2)(3)依次出现。然而你将(1)左浮动,(2)右浮动,这两个浮动的元素脱离了正常的流,所以(3)此时是正常流的第一个元素,能够丝毫不受影响地布局在第一行。如果我们把html的顺序换一下,比如换成(1)(3)(2), 布局的时候,(1)被左浮动了,(3)成为正常流的第一个元素,占满了整个第一行;然后轮到(2),第一行已经被(3)占满了,(2)只能到下一行,然后你设置了(2)右浮动,所以(2)到了第二行的右边。"zhong"就顺理成章地出现在了(2)的左边。
随时随地看视频慕课网APP
我要回答