老师为什么about区怎么包含了所有的呀

老师为什么about区怎么包含了所有的呀

<!DOCTYPE html>
<html>
<head>
	<title>作业</title>
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
	<div class="header">
		<div class="null"></div><!--添加空白颜色-->
		<div class="logo">
			<img src="images/logo.png">
		</div>
		<div class="navigate"><!--导航栏-->
			<ul>
				<li><a href="#">HOME</a></li>
				<li><a href="#">ABOUT</a></li>
				<li><a href="#">GALLERY</a></li>
				<li><a href="#">FACULTY</a></li>
				<li><a href="#">EVEVTS</a></li>
				<li><a href="#">CONTACT</a></li>
			</ul>
		</div>
	</div>

	<div class="about">
		<div class="about-top">
			<h1>about</h1>
			<hr />
			<p>fdfdfdffdsafadsghfkghfdkghkfdaa</p>
			<p>fdfdfdffdsafgnjkfhgkjhgkadsaa</p>
			<p>fdfdfdffdsafadsaa</p>
		</div>
		<div class="about-middle">
			<div class="about-middle-left">
				<div class="about-middle-left-top"></div>
				<div class="about-middle-left-bottom"></div>
			</div>
			<div class="about-middle-middle">
				<img src="images/bb3.jpg">
			</div>
			<div class="about-middle-right">
				<div class="about-middle-right-top"></div>
				<div class="about-middle-right-bottom"></div>
			</div>
		</div>
		<div class="about-bottom"></div>
	</div>
	<div class="gallery"></div>
	<div class="footer"></div>
</body>
</html>


*{
	margin: 0px;
	padding: 0px;
}
.header{
	margin:0px auto;
	width: 1700px;
}
.header .null{
	width: 100px;
	height: 48px;
	float: left;
	background-color: #07cbc9;
}
.header .logo{
	float: left;
}
.header .navigate{
	width: 1340px;
	height: 48px;
	float: right;
	
	background-color: #07cbc9;
}

.header .navigate ul{
	height: 48px;
	text-align: center;


}

.header .navigate ul li{
	
	margin-top: 0px;
	float: right;
	margin-right: 50px;
	line-height: 47px;
	list-style: none;
	
	


}
a{
	text-decoration: none;
	color: #ffffff;
	
	display: block;/*只有将 a 设置为块才可以设置高度*/
	background-color: #07cbc9;
}

.header .navigate ul li a:hover{
	color: #ffffff;
	width:90px;/*改变宽度大小*/
	height: 48px;
	background-color: #000;/*改变颜色 a的背景颜色 */
}


http://img1.sycdn.imooc.com//climg/5dd1136609f01b6a13630727.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕小尤 2019-11-17 17:40:34

同学你好,建议为about设置固定宽高、定位与隐藏溢出。代码如下:

http://img1.sycdn.imooc.com//climg/5dd1154409409c1904380176.jpg

祝学习愉快!

  • 提问者 阳光细雨0 #1
    为什么加了overflow:hidden 就不会包含所有的呀
    2019-11-17 17:50:28
  • 好帮手慕小尤 回复 提问者 阳光细雨0 #2
    同学你好,overflow:hidden可以隐藏溢出部分,也可以清除浮动。header部分设置了浮动导致about的位置从顶部开始。所以需要清除浮动。祝学习愉快!
    2019-11-17 17:57:10
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
PHP小白零基础入门
  • 参与学习           人
  • 提交作业       626    份
  • 解答问题       4930    个

想要学好Web后端开发的中流砥柱语言,本阶段为你轻松铺就扎实的基础,从前端网页布局的搭建到后台PHP开发,助你从零基础到掌握主流开发语言。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师