如果对foot做clear：both会怎么样？

另外一种方法，对right做float：right，然后对后面foot做clear：both得到的效果感觉差不多，但是mainbody颜色自己换了。这是为什么？

qq_PureBLACK_13313525

2016-05-09

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

关注问题我要回答

681

操作

收起

3 回答

Silily
2016-06-11

蓝色是wrap的背景色，对footer使用clear:both;清除了上面right的浮动，但是left和right浮动之后脱离文档流，无法撑起mianbody，所以看不到mianbody的背景色，之间显示出了wrap的背景色

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

收起回答

C0EEC3F7BBAA

一语点透啊··想了这半天为啥left和right都float之后黄色的mainbody就变成wrap的蓝色了··原来脱离文档流mainbody就缩缩看不见了··哈哈

2016-07-06 回复有任何疑惑可以回复我~

vaneX
2016-05-09

<!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:0px;
	padding:0px;
  }
  .floatleft{
  	float:left;
  }
  .floatright{
  	float:right;
  }
  .floatclear{
  	clear:both;
  }
  #warp{
	background:#CCC;
	width:960px;
	margin:0px auto;
  }
  #header{
  	background:red;
  }
  #mainbody{
  	background:green;
  }
  #footer{
  	background:pink;
	text-align:center;
  }
  .box{
	background:yellow;
  }
</style>
</head>

<body>
<div id="warp">
  <div id="header">头部</div>
  <div id="mainbody">
  	<div class="box floatleft">
      left
    </div>
  	<div class="box floatright">
      right
    </div>
  </div>
  <div class="floatclear"></div>
  <div id="footer">版权部分</div>
</div>
</body>
</html>

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

收起回答

vaneX

不知道这样写和老师的写法哪个好

2016-05-09 回复有任何疑惑可以回复我~