为了账号安全,请及时绑定邮箱和手机立即绑定

如果对foot做clear:both会怎么样?

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

正在回答

3 回答

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

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

C0EEC3F7BBAA

一语点透啊··想了这半天为啥left和right都float之后黄色的mainbody就变成wrap的蓝色了··原来脱离文档流mainbody就缩缩看不见了··哈哈
2016-07-06 回复 有任何疑惑可以回复我~
<!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 回复 有任何疑惑可以回复我~
#1

vaneX

不知道这样写 和 老师的写法 哪个好
2016-05-09 回复 有任何疑惑可以回复我~

哦,还对left做了float:left。

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

举报

0/150
提交
取消
网页布局基础
  • 参与学习       214705    人
  • 解答问题       1756    个

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

进入课程

如果对foot做clear:both会怎么样?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信