完全按代码敲得在mainbody用overflow:hidden清除浮动怎么还会出现这种情况？

<!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>

qq_颜小达_03675188

2016-10-07

源自：网页布局基础 3-2

关注问题我要回答

561

操作

收起

4 回答

teek
2017-02-11

因为那个主体部分这四个字，影响了布局。==

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

sejeze
2016-11-18

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

紧挨在浮动后面的.footer 才需要清除

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

sejeze
2016-11-18

.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 回复有任何疑惑可以回复我~

qq_颜小达_03675188 提问者
2016-10-07

<!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

提交

取消

网页布局基础

参与学习 214707 人
解答问题 1756 个

让你精通CSS中三大定位机制，彻底掌握网页布局的相关知识

完全按代码敲得在mainbody用overflow:hidden清除浮动怎么还会出现这种情况？

我要回答关注问题

意见反馈帮助中心 APP下载