完全按代碼敲得 在mainbody用overflow:hidden清除浮動(dòng) 怎么還會(huì)出現(xiàn)這種情況？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浮動(dòng)布局-橫向兩列</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<style type="text/css">
*{margin: 0;padding:0;}
#wrap{background:#00C;margin: 0 auto;width: 960px;}
#header{background: #FF3300;width: 100%;}
#mainbody{background: #FC0;width: 100%;overflow: hidden;}
.left{width: 800px;height:200px;background: #000;float: left;}
.right{width: 140px;height: 500px;background: #690;float: right;}
#footer{background: #639;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">版權(quán)部分</div>
</div>
</body>
</html>
2017-02-11
因?yàn)槟莻€(gè)主體部分這四個(gè)字，影響了布局。==
2016-11-18
.mainbody 在浮動(dòng)的前面 完全不需要清除。
緊挨在浮動(dòng)后面的.footer 才需要清除
2016-11-18
.mainbody這個(gè)DIV把.left跟.right閉合在一起了 清除不了浮動(dòng)
<!DOCTYPE?html> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/> <title>浮動(dòng)布局-橫向兩列</title> <link?href="css/style.css"?type="text/css"?rel="stylesheet"?/> <style?type="text/css"> *{margin:?0;padding:0;} #wrap{background:#00C;margin:?0?auto;width:?960px;} #header{background:?#FF3300;width:?100%;} #mainbody{background:?#FC0;width:?100%;overflow:?hidden;} .left{width:?800px;height:200px;background:?#000;float:?left;} .right{width:?140px;height:?500px;background:?#690;float:?right;} #footer{background:?#639;width:?100%;} </style> </head> <body> <div?id="wrap"> <div?id="header">頭部</div> <div?id="mainbody">主體部分</div> <div?class="left"></div> <div?class="right"></div> <div?id="footer">版權(quán)部分</div> </div> </body> </html>望采納.
2016-10-07
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浮動(dòng)布局-橫向兩列</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<style type="text/css">
*{margin: 0;padding:0;}
#wrap{background:#00C;margin: 0 auto;width: 960px;}
#header{background: #FF3300;width: 100%;}
#mainbody{background: #FC0;width: 100%;overflow: hidden;}
.left{width: 800px;height:200px;background: #000;float: left;}
.right{width: 140px;height: 500px;background: #690;float: right;}
#footer{background: #639;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">版權(quán)部分</div>
</div>
</body>
</html>