我不明白怎么mainbody的父元素就被影响了呢？

就是黄色区域的颜色没了

栄篱

2015-11-29

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

关注问题我要回答

400

操作

收起

4 回答

qq_安伊偌拉_0 回答被采纳 +3 积分
2015-12-01

子元素不浮动的情况下，父元素不设置高度会被子元素撑起来。但是如果子元素设置了浮动，就会造成父元素坍塌，就是不会把父元素撑起来。清除浮动之后才会撑起父元素。

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

收起回答

栄篱提问者

看到你这信息一直弄到现在，用工具试了很多次出现了很多现象，记录现象分析分析现在才明白过来，如果不给父元素设置高度而子元素设置了浮动会塌掉，因为父元素是根据子元素的高度撑开的，如果给父元素设置了高度，那子元素设置了浮动也一样不会塌

2015-12-01 回复有任何疑惑可以回复我~

栄篱提问者

谢谢你的耐心解答，好人一生平安

2015-12-01 回复有任何疑惑可以回复我~

qq_安伊偌拉_0
2015-12-01

黄色区域在啊

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

收起回答

栄篱提问者

不好意思，这代码里的#mainbody是去了浮动的影响的，没去浮动就不是你上图的那样了，就是.left和.right用了float；而#mainbody却受到了影响。这是为啥呀子。

2015-12-01 回复有任何疑惑可以回复我~

栄篱提问者
2015-11-30

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

收起回答