请老师过目，不足请指正

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>IMOOC</title>
<link rel="stylesheet" type="text/css" href="main.css">
<style>
        section.main {
            width: 1200px;
            margin: 20px auto 0;
        }
         
        .main > aside {
            width: 450px;
            float: left;
        }
         
        .main > article {
            width: 730px;
            float: right;
        }
         
        .main h1 {
            font-size: 30px;
            font-weight: lighter;
            margin-bottom: 30px;
        }
         
        .main h1 > samp {
            color: #7c7c7c;
            font-size: 30px;
        }
         
        .main > aside > dl {
            position: relative;
            display: block;
            margin-bottom: 17px;
            height: 74px;
        }
         
        .main > aside > dl > dt {
            position: absolute;
            top: -1px;
            left: 95px;
            font-size: 16px;
            font-weight: bold;
            line-height: 16px;
            text-decoration: underline;
        }
         
        .main > aside > dl > dd:first-of-type {
            position: absolute;
            left: 0px;
        }
         
        .main > aside > dl > dd:nth-of-type(2) {
            position: absolute;
            left: 18px;
            top: 8px;
            color: white;
            font-size: 30px;
        }
         
        .main > aside > dl > dd:last-of-type {
            position: absolute;
            left: 95px;
            top: 20px;
            margin: 0;
        }
         
        .main > article > p,
        .main > article > image {
            margin-bottom: 30px;
        }     
</style>
</head>
<body>
<section class="main">
    <aside>
        <h1>Recent <samp>Course</samp></h1>
        <dl>
            <dt>HTML</dt>
            <dd><img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png"></dd>
            <dd>1</dd>
            <dd>This is HTML description</dd>
        </dl>
        <dl>
            <dt>CSS</dt>
            <dd><img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png"></dd>
            <dd>2</dd>
            <dd>This is CSS description</dd>
        </dl>
        <dl>
            <dt>JS</dt>
            <dd><img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png"></dd>
            <dd>3</dd>
            <dd>This is JS description</dd>
        </dl>
        <dl>
            <dt>Angular JS</dt>
            <dd><img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png"></dd>
            <dd>4</dd>
            <dd>This is Angular JS description</dd>
        </dl>        
    </aside>
    <article>
        <h1>Welcome to <samp>Massive Open Online Course!</samp></h1>
        <p>This is Paragraph 1</p>
        <img src="http://img1.sycdn.imooc.com/climg//582e61180001ede703300130.jpg">
        <p>This is the third Paragraph</p>
        <p>The last paragraph is full of useless words and insignificant words just used to fill the line to strech this p to multiple lins which can obtain a better display</p>
    </article>
</section>
</body>
</html>

慕工程8451887 2019-07-20

源自：HTML5网页布局 2-5 编程练习

收起

2回答

好帮手慕夭夭 2019-07-24 10:15:01

你好同学，这里清除浮动和没有清除浮动效果是一样的。因为只是给父元素解决了高度塌陷问题，可以在浏览器按F12查看，具体操作如下：

另外，子元素浮动会脱离文档流，不占据正常文档流的高度，它就没有办法撑开父元素高度，所以父元素高度会塌陷哦。这个是入门阶段浮动课程中讲解的，如果同学还不熟悉浮动，建议复习一下阶段一里面的css浮动课程，以巩固学过的基础哦。

祝学习愉快，望采纳。

收起回答

好帮手慕夭夭 2019-07-21 11:08:10

你好同学，结构实现的很不错。有一个小问题：子元素设置浮动，导致大容器main高度塌陷，如下：

如下清除浮动即可：

祝学习愉快，望采纳。

收起回答

提问者慕工程8451887 #1

老师你好，谢谢你的答案不过我加上 overflow hidden后并没有看出来效果有什么不同。想请问老师是如何查出 section.main 1200x0的？是用谷歌浏览器的开发工具吗？还有就是能简要讲以下大容器main高度塌陷吗？为什么子元素设置浮动就会塌陷谢谢

2019-07-23 19:57:55