2-9的问题

2-9的问题

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    html,body,div,img{
    	margin:0;
    	padding:0;
    }
	.header{
		height:100px;
		width:100%;
		line-height:100px;
		background:#000;
		color:#fff;
		position:fixed;
		top:0;
		left:0;
		right:0;
	}
	.nav{
		float:right;
		color:#fff;
		margin:0 40px;
	}
	.logo img{
		float:left;
	}
	.bodyer{
		min-height:1000px;
		width:100%;
		background:#ADD8E6;
		margin:100px 0 0 0;
		clear:both;
		overflow:hidden;
	}	
	.left{
		height:100%;
		width:59%;
		padding:150px 0 0 0
		float:left;
	}
	.right{
		height:100%;
		width:40%;
		float:right;
	}
	h1,span{
		font-weight:bold;
	}
	.left p span{
		background:#FF9999;
	}
		.claer{
		clear:both;
	}
	.footer{
		height:100px;
		width:100%;
		line-height:100px;
		text-align:center;
		background:#000;
		color:#fff;
		position:fixed;
		bottom:0;
		left:0;
		right:0;
	}
	.footerlink{
		display:inline;
		margin:0 40px;

	}
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div>
  	<div class="header">
  		<div class="logo"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" alt="logo"></div>
  		<div class="nav">手记</div>
  		<div class="nav">猿问</div>
  		<div class="nav">实战</div>
  		<div class="nav">职业路径</div>
  		<div class="nav">课程</div>
  	</div>
  	<div class="bodyer">
  		<div class="left">
  			<h1>课程推荐</h1>
  			<p><span>职业路径</span>&nbsp;&nbsp;HTML5与CSS3实现动态网页</p>
  			<p><span>职业路径</span>&nbsp;&nbsp;零基础入门Android语法与界面</p>
  			<p><span>职业路径</span>&nbsp;&nbsp;IOS基础语法与常用控件页</p>
  			<p><span>职业路径</span>&nbsp;&nbsp;PHP入门开发</p>
  			<p><span>职业路径</span>&nbsp;&nbsp;JAVA入门开发</p>
  		</div>
  		<div class="right">
  			<h1>相关课程</h1>
  			<p><span>HTML</span>&nbsp;&nbsp;<span>CSS</span>&nbsp;&nbsp;<span>JavaScript</span></p>
  			<p><span>HTML5</span>&nbsp;&nbsp;<span>CSS3</span>&nbsp;&nbsp;<span>Jquery</span></p>
  			<p><span>移动端基础</span>&nbsp;&nbsp;<span>移动端APP开发</span></p>
  		</div>
  		<div class="clear"></div>
  	</div>
  	<div class="footer">
  		<div class="footerlink">网站首页</div>
  		<div class="footerlink">企业合作</div>
  		<div class="footerlink">人才招聘</div>
  		<div class="footerlink">联系我们</div>
  		<div class="footerlink">常见问题</div>
  		<div class="footerlink">友情链接</div>
  	</div>

  </div>
</body>
</html>

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

第一个问题为什么我第二次输入浮动不能使用,而且还是白色,第一次是可以用的啊。开始时搭建bodyer部分的左侧和右侧使用浮动就不能使用,效果不能实践?


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

使用div中嵌套浮动属性可以用  clear属性 没能实践,还有用overflow:hidden;也没能实践,请老师解决一下问题

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

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

2回答
Miss路 2017-12-11 13:42:07

学习初期,一般情况下都要清除一下浮动,因为你不知道不清楚会出现什么样的情况,出现情况你不知道怎么控制,等以后写的多了就理解了,只能通过不断的写代码,积累经验方能灵活运用。加油!

Miss路 2017-12-10 14:29:16

1、第一个问题,你写浮动之前的那句没有给写结束符号,给上一句添加一个分号。

2、你现在已经清楚掉了浮动了,两个都可以的呀。

你的问题只要是卡在了第一个问题里面,改好了相信后面就好解决了,加油!

  • 提问者 慕仰7477706 #1
    我改写了一下,但是我又有新问题了,就是我发现,不谢clear属性也可以实现了,clear什么时候应用呢?
    2017-12-11 12:17:03
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

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

在线咨询

领取优惠

免费试听

领取大纲

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