老师刚我看看，为什么左侧边栏用了浮动后，全部都重叠拉？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="test.css"/>
</head>
<body>
<!-- 宽度:1200px、高度：473px、aside:450px、aritcle：750px、h1:30px、 -->
<section>
<aside>
<h1>Recent <samp>Course</samp></h1>
<dl>
<dt>Hype Text Markup Language</dt>
<dd><img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png"></dd>
<dd>
HTML is the standard markup language used to create
web pages and its elements form the buliding blocks of
all websites.
</dd>
</dl>
<dl>
<dt>Cascading Style Sheets</dt>
<dd><img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png"></dd>
<dd>
Cascading Style Sheets(CSS) is a simple mechanism for
adding style (e.g.,fonts,colors,spacing)to web
documents.
</dd>
</dt>
</dl>
<dl>
<dt>JavaScript</dt>
<dd><img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png"></dd>
<dd>
JavaScript is a high-level,dynamic,untyped,and
interpreted programming language.
</dd>
</dl>
<dl>
<dt>AngularJS</dt>
<dd><img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png"></dd>
<dd>
AngularJS is an opan-source web application framework
mainly maintained by Google and by a community of
individuals and...
</dd>
</dl>
</dl>
</aside>
<article>
<h1>Welcome to <samp>Massive Open Online Course!</samp></h1>
<p>We provide the latest knowledge to help you cope with the changing world!</p>
<img src="http://img1.sycdn.imooc.com/climg//582e61180001ede703300130.jpg"/>
<p>
We hope that all the students who love the internet can be more convenient access to learning resouces,using
the internet thinking to change our learning.
</p>
<p>
Focus on IT skills education MOOC,consistent with the development thrend of the internet down to earh's MOOC.
We are free,we only teach useful,we concentrate on education.
</p>
</article>
</section>
</body>
</html>
---------------------------------------------------------------
*{
padding:0;
margin:0;
font-family:"微软雅黑";
}
section{
width:1274px;
overflow: hidden;
margin:0 auto;
}
section>aside{
float:left;
width:483px;
}
section>article{
float:right;
width:764px;
}
section h1{
font-size:30px;
margin:37px 0 37px 0;
}
section h1 samp{
font-size:30px;
color:#7c7c7c;
}
section aside dl{
width:445px;
margin-bottom:20px;
position:relative;
}
section aside dl dt{
position:absolute;
font-size:20px;
top:-1px;
left:90px;
line-height:20px;
}
section>aside>dl>dd:first-of-type{
top:20px;;
position:absolute;
}
section>aside>dl>dd:last-of-type{
left:90px;
position:absolute;}
正在回答
同学你好，之前同学也说过了，定位的元素会脱离文档流。dl是块元素，里面的内容会撑起高度，但是dt和dd设置了绝对定位脱离文档流，无法撑起dl高度，所以高度就塌陷了。再加上相对于dl设置的定位位置是一样的，所以就重叠在一起了。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星