2-4 清除浮动方法四问题

老师，在跟视频练习中，发现如果给中间的“墙” 设置margin-bottom是有效的，如果给中间“墙”设置margin-top 就是无效的，这是什么原因？

* {
margin: 0;
padding: 0;
}

p {
width: 200px;
height: 200px;
background-color: red;
margin: 10px;
float: left
}
div.mid {
clear: both;
margin-bottom: 10px;
}

<section class="sec1">
<p></p>
<p></p>
</section>
<div class="mid"></div>
<section class="sec2">
<p></p>
<p></p>
</section>

慕移动4506339 2022-10-15

源自：浮动与定位 2-4 清除浮动

收起

1回答

imooc_慕慕 2022-10-16 11:05:07

同学你好，为了方便测试我们将p元素的margin设置为right

设置margin-top没踹开是因为前面的元素浮动，脱离文档流，所以无法看到踹开的效果，可以换成一个正常元素，例如一个图片，那么此时box设置的margin-top就可以看到效果了，如下：

此时前面是浮动的元素，那么我们就需要采取老师讲解的，给中间的元素设置高度，

祝学习愉快~

收起回答

提问者慕移动4506339 #1

老师，按照您的讲解，中间的div墙margin-top没踹开是因为上面的元素是浮动，脱离文档流，所以没踹开，那么为什么margin-bottom 可以踹开呢? 下面sec2中的元素同样也设置了浮动，按道理也是脱离文档流的，为什么却能被中间div 踹开？

2022-10-16 15:25:09
imooc_慕慕回复提问者慕移动4506339 #2

同学你好，
可以理解为给div设置margin-top属性值是让div去踹body元素，此时的div可以看做是一个空盒子（因为子元素浮动导致父元素div高度塌陷）所以是可以正常踹开的。而box盒子设置margin-top没踹开是因为前面的元素浮动，脱离文档流，所以无法看到踹开的效果，可以换成一个正常元素，例如一个图片，那么此时box设置的margin-top就可以看到效果了。而margin-bottom也是可以正常踹开的。
同学可以再重新理解一下。
祝学习愉快~

2022-10-16 15:36:44