3-2编程，请帮忙看下是否有纰漏

<!DOCTYPE html>
<html>
<head>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .main{
            width:766px;
            border:1px dotted #ccc;
            margin-left:30px;
            margin-top:100px;
            padding-top:10px;
        }
        p{
            padding-left:10px;
            font-size:13px;
            line-height:30px;
        }
        .img1,.img2,.img3{
            width:240px;
            height:150px;
            border:1px dotted #ccc;
            
            margin-right:10px;
            margin-bottom:10px;
            float:left;
        }
        .img1{
            margin-left:10px;
        }
        .clear1{
            clear:both;
        }
    </style>
        <!-- 此处编写样式 -->
</head>
<body>
    <div class="main">
        <div class="img1">
            <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg" alt="picture1" width="240px" height="120px" />
            <p>欢迎来到慕课网学习知识！</p>
        </div>
        <div class="img2">
            <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg" alt="picture1" width="240px" height="120px" />
            <p>欢迎来到慕课网学习知识！</p>
        </div>
        <div class="img3">
            <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg" alt="picture1" width="240px" height="120px" />
            <p>欢迎来到慕课网学习知识！</p>
        </div>
        <div class="img1">
            <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg" alt="picture1" width="240px" height="120px" />
            <p>欢迎来到慕课网学习知识！</p>
        </div>
        <div class="img2">
            <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg" alt="picture1" width="240px" height="120px" />
            <p>欢迎来到慕课网学习知识！</p>
        </div>
        <div class="img3">
            <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg" alt="picture1" width="240px" height="120px" />
            <p>欢迎来到慕课网学习知识！</p>
        </div>
        <div class=clear1></div>
    </div> 
    
        <!-- 此处写代码 -->    
</body>
</html>

老师：首先麻烦您帮我看下以上代码是否有可以改进的地方。其次有个疑问。我发现在使用了float之后，上下的margin是会叠加的？

Durians 2017-09-29

源自：float浮动 3-1 实战分析

收起

2回答

小丸子爱吃菜回答被采纳获得+3积分 2017-09-30 10:00:41

1、整体效果没有问题，只是代码head中没有添加<meta charset="utf-8"/>，导致页面打开文字乱码。

2、块级元素的垂直相邻外边距会合并，浮动元素的外边距也不会合并。

祝学习愉快！

收起回答

Durians 提问者 #1

谢谢老师

2017-09-30 21:47:18

慕勒7132189 2017-10-04 10:56:20

为什么你这个没有崩塌？我设置float就崩塌了，也没看到父元素有设置float啊？

收起回答

提问者 Durians #1

我最下面有个空的div,就是来解决崩塌的，视频里面有这方面的知识

2017-10-04 15:24:21
慕勒7132189 回复提问者 Durians #2

若不设置具体像素，能实现吗？

2017-10-04 16:03:20
提问者 Durians 回复慕勒7132189 #3

我那个就是没设置具体的像素，直接用clear，清除浮动就好。之前的课程里面有四种清除浮动的方式

2017-10-04 21:58:37