浮動清除問題。
<!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=utf-8"?/>
<title>無標題文檔</title>
<style?type="text/css">
*{margin:0;padding:0;}
#wrap{
background:#FFF;/*白色*/
margin:0?auto;
width:960px;
}
#header{background:#09F;width:100%;}/*淡藍色*/
#mainbody{background:#00C;width:100%;overflow:hidden;}/*深藍色*/
.left{
width:800px;
height:200px;
background:#000;
float:left;
}
.right{
width:140px;
height:500px;
background:#9F0;
float:right;
}
#footer{
background:#F0F;
width:100%;
}/*粉紅色*/
</style>
</head>
<body>
<div?id="wrap">
<div?id="header">頭部</div>
????<div?id="mainbody">
???? <div?class="left"></div>
????????<div?class="right"></div>
????</div>
????<div?id="footer">版權部分</div>
<div>
</body>
</html>如果我給mainbody設置一個固定高度，比如設置height=500px,這里顯示就正常了，不會對后面的footer造成影響。否則就會出現如上問題，需要加overflow:hidden清除浮動。這是為什么呢？
2016-01-17
當mainbody沒有設置固定高度，因為被子塊浮動影響導致mainbody被壓縮成一條線。那么footer只能跟隨right后面。
當mainbody設置固定高度后，字塊影響消逝，footer跟隨在mainbody后面了。