亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

完全按代碼敲得 在mainbody用overflow:hidden清除浮動 怎么還會出現這種情況？

http://img1.sycdn.imooc.com//57f7ad4b0001d63e13900869.jpg

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>浮動布局-橫向兩列</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">版權部分</div>

</div>

</body>

</html>


正在回答

4 回答

因為那個主體部分這四個字，影響了布局。==

0 回復 有任何疑惑可以回復我~

.mainbody 在浮動的前面 完全不需要清除。

緊挨在浮動后面的.footer 才需要清除


1 回復 有任何疑惑可以回復我~

.mainbody這個DIV把.left跟.right閉合在一起了 清除不了浮動

<!DOCTYPE?html>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>浮動布局-橫向兩列</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">版權部分</div>
</div>
</body>
</html>

望采納.

0 回復 有任何疑惑可以回復我~

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>浮動布局-橫向兩列</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">版權部分</div>

</div>

</body>

</html>


0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
網頁布局基礎
  • 參與學習       214663    人
  • 解答問題       1833    個

讓你精通CSS中三大定位機制，徹底掌握網頁布局的相關知識

進入課程

完全按代碼敲得 在mainbody用overflow:hidden清除浮動 怎么還會出現這種情況？

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號