有什么需要改的吗

<html>
    <head>
        <meta charset="UTF-8"/>
        <title>简单练习</title>
     
    <style type="text/css">
        div {
            width: 800px;
            height: auto;
            border: 1px dashed lightgray ;
            height: 380px;
        }
        .div1 {
            border: 1px solid lightgray;
            width: 240px;
            float: left;
            margin: 20px 0 20px 20px;
            text-align: center;        
            height: 160px;
        }
        .div2 {
            border: 1px solid lightgray;
            width: 240px;
            height: 160px;
            float: left;
            margin: 0 0 20px 20px;
            text-align: center;
        }
    </style>
    </head>
    <body>
        <div>
            <div class="div1">
                <img src="img/q1.jpg"/>欢迎来慕课网学习新知识！
            </div>
            <div class="div1">
                <img src="img/q2.jpg"/>欢迎来慕课网学习新知识！
            </div>
            <div class="div1">
                <img src="img/q3.jpg"/>欢迎来慕课网学习新知识！
            </div>
            <div class="div2">
                <img src="img/q1.jpg"/>欢迎来慕课网学习新知识！
            </div>
            <div class="div2">
                <img src="img/q2.jpg"/>欢迎来慕课网学习新知识！
            </div>
            <div class="div2">
                <img src="img/q3.jpg"/>欢迎来慕课网学习新知识！
            </div>
        </div>
    </body>
</html>

慕后端0484621 2017-09-01

源自：Float浮动 3-2 编程练习

收起

2回答

慕丝3243066 2017-09-02 00:03:05

第一个div设置class="box"，另外div1和div2的class="pic"，在style中只设置这两个为float=left。

收起回答

imooc_澈 2017-09-01 18:04:26

您好，页面效果展示的很漂亮，可以再在最后一个</div>前面加<div class="clear"></div>，style设置里加

.clear{

clear: both;

}

用来清除浮动。

收起回答

Michelleqyh #1

请问这里新加一个div并且这里的clear:both是不是让这个div另起一行？不应该跑到第三行上去了吗？而且这个新的div里面除了clear什么样式都没有，我觉得它应该没有效果，有什么用呢？

2017-11-18 19:36:40
guly 回复 Michelleqyh #2

你好，这个是清楚浮动的作用，祝学习愉快！

2017-11-19 12:29:29
Michelleqyh 回复 guly #3

为什么要清除浮动？

2017-11-19 19:53:35