没有很懂题目的意思，

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .per{
            width: 300px;
            height: auto;
            border:2px solid #aaa;
            float: left;
        }
        .li{
            width: 100px;
            height: 100px;
            background: red;
            margin: 5px;
            /*float: left;
        }
        
        div{clear:both;}/*此处写代码*/
    </style>
</head>
<body>
    <div class="per">
        <div class="li"></div>
        <div class="li"></div>
        <div></div>
        <!-- 此处写代码 -->
    </div>
</body>
</html>

我照着题目添加之后，变成了两排。。。。

不想做设计的设计师 2017-06-28

源自：float浮动 2-10 编程练习

收起

4回答

Miss路 2017-07-10 14:16:08

给一个空白的div设置类，加上clear:both是清楚浮动，看助教老师的解释。这个是清楚浮动的方法之一。如果不理解建议再重新听一下这个课。祝学习愉快！

收起回答

好帮手慕糖 2017-07-10 13:48:08

你好，clear:both;为清除浮动。设置一个空白的div，这个div为不浮动，则会撑开父级的元素。清除浮动的方法也有很多种，这里使用的是clear:both;来清除浮动。祝学习愉快！

收起回答

好帮手慕糖 2017-06-29 10:19:55

你好，最后是给div设置的清楚浮动，导致.li也继承了清除浮动的属性，建议：给空白的div的设置个类，然后清除浮动。还有几十去掉父级.per的浮动。可参考下列代码，祝学习愉快！

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

.per{

width: 300px;

height: auto;

}

.li{

width: 100px;

height: 100px;

background: red;

margin: 5px;

float: left;

}

.cl{clear:both;}/*此处写代码*/

</style>

</head>

<body>

</div>

</body>

收起回答

MrNeo #1

请问为什么给一个空白的div设置类，加上clear:both就能达到效果呢？

2017-07-10 12:10:00
慕虎8092331 回复 MrNeo #2

我的理解是：三个div是并排的，前两个因为浮动导致父元素塌陷，最后一个设置清除浮动后，撑开了父元素

2017-12-29 19:58:29