关于clear：both影响的margin麻烦老师解答，谢谢
来源：2-4 清除浮动
夜的解忧铺
2021-06-30 01:14:06
<style>
*{
padding: 0;
margin: 0;
}
p{
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background-color: orange;
}
.box{
clear: both;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div>
<p></p>
<p></p>
</div>
<div class="box">
<p></p>
<p></p>
</div>
给.box 设置clear:both属性 怎么margin-top 和margin-bottom 有的可以生效 有的不生效呢？两个div之间没有高度，即便互相踹也没效果，但是margin-bottom margin-top 向下向上踹是有效果的 但是不生效
给div设置clear:both属性 margin-top 的效果，向上踹的body，但是body标签的margin不是设置成0，为什么也能踹开呢 ？第二个踹的没高度的盒子 没踹开
margin-bottom的效果很奇怪
<style>
* {
padding: 0;
margin: 0;
}
p {
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background-color: orange;
}
div{
margin-bottom: 20px;
}
.cl{
clear: both;
background-color: red;
}
div{
margin-top: 20px;
}
/* .h20{
height: 20px;
}
.h22{
height: 22px;
} */
</style>
</head>
<body>
<div class="box1">
<p></p>
<p></p>
</div>
<div class="cl"></div>
<div class="box2">
<p></p>
<p></p>
</div>
</body>
.cl没高度 为什么可以踹开呢
1回答
-
好帮手慕慕子
2021-06-30
同学你好，对于你的问题解答如下：
1、可以参考下图注释理解
2、可以理解为给div设置margin-top属性值是让div去踹body元素，与body是否设置了margin属性值无关，此时的div可以看做是一个空盒子（因为子元素浮动导致父元素div高度塌陷）所以是可以正常踹开的。
而box盒子设置margin-top没踹开是因为前面的元素浮动，脱离文档流，所以无法看到踹开的效果，可以换成一个正常元素，例如一个图片，那么此时box设置的margin-top就可以看到效果了，如下：
3、因为子元素p浮动后，div父元素没有高度，所以查看的margin-bottom效果如下：
4、.cl此时并没有高度，也没有踹开，为了方便同学更好的理解，老师将第一个div下的p元素设置为粉色背景了，如下：
此时给div设置的margin-bottom并没有踹开下面的和box盒子，粉色盒子和橙色盒子连在一起显示，如下：
同学截图中查看的并不是踹开的距离，而是cl的高度为0 ，由于设置了上下margin属性值，在页面中实际占据的位置，如下：
祝学习愉快~
1
相似问题