<!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>無標(biāo)題文檔</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>把如上代碼復(fù)制打開，會發(fā)現(xiàn)<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的順序，網(wǎng)頁顯示中的DIV元素就會出現(xiàn)換行
2 回答
已采納
小小小小噠
TA貢獻(xiàn)6條經(jīng)驗(yàn) 獲得超6個贊
正常情況下，文檔是普通流布局，也就是 （1）（2）（3）依次出現(xiàn)。然而你將（1）左浮動，（2）右浮動，這兩個浮動的元素脫離了正常的流，所以（3）此時是正常流的第一個元素，能夠絲毫不受影響地布局在第一行。
如果我們把html的順序換一下，比如換成（1）（3）（2）， 布局的時候，（1）被左浮動了，（3）成為正常流的第一個元素，占滿了整個第一行；然后輪到（2），第一行已經(jīng)被（3）占滿了，（2）只能到下一行，然后你設(shè)置了（2）右浮動，所以（2）到了第二行的右邊。"zhong"就順理成章地出現(xiàn)在了（2）的左邊。
添加回答
舉報
0/150
提交
取消