老师，这里用隔墙的方式清除浮动，margin没有失效
问题描述：
视频中老师说这种方式会使margin失效，但是我设置了一下是生效的
相关代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 这四个P将在一行显示，因为div没有形成BFC，高度都是0，子元素将不再形成两行了，后边的元素就追上去了---------这个就叫没有清除浮动（浮动没有被完全关闭在一个盒子里面） */
* {
padding: 0;
margin: 0;
}
/* 很多时候不设置高度的原因是因为盒子内容可能是动态的，比如放的是用户的帖子，留言，订单，评论等 */
/* 给div设置高度是可以清除浮动，但是不可取 */
/* div {
height: 200px;
margin-bottom: 10px;
} */
p {
width: 200px;
height: 200px;
border: 1px solid #000;
background-color: orange;
float: left;
margin-right: 20px;
}
/* 1.使用overflow：hidden清除浮动 */
/* div {
overflow: hidden;
margin-bottom: 20px;
} */
/* 2.使用clear:box清除其他浮动造成的影响 */
/* 副作用是margin会失效，不推荐 */
/* .box2 {
clear: both;
margin-top: 20px;
} */
/* 3.使用after伪元素，这种方法设置margin是有效果的 */
/* .clearfix::after {
content: '';
clear: both; */
/* 必须转换为块级元素 */
/* display: block;
}
.clearfix {
margin-bottom: 10px;
} */
/* 4.隔墙（margin不会生效） */
.ge {
clear: both;
}
.box2 {
/* margin没有失效？ */
margin-top: 20px;
}
/* .h18 {
height: 18px;
}
.h20{
height: 20px;
} */
</style>
</head>
<body>
<div class="box1 clearfix">
<p></p>
<p></p>
</div>
<div class="ge h18"></div>
<div class="box2 clearfix">
<p></p>
<p></p>
</div>
</body>
</html>
24
收起
正在回答 回答被采纳积分+1
1回答
好帮手慕然然
2021-05-19 10:19:53
同学你好，在使用隔墙的方式清除浮动时，由于中间的“墙”设置了清除浮动属性（clear:both），此时对box2盒子使用margin向上踹是生效的，但是对box1盒子使用margin向下踹的效果不是我们想要的，如图所示：
因为同学是对box2设置的margin-top，所以是生效的。而视频中老师是对box1设置的margin-bottom，所以是不生效的。
祝学习愉快！
-
同学你好，其实不管是对box1还是对box2来说，如果给其设置的是margin-bottom，都是没有效果的。因为box1和box2中的子元素都设置了浮动，导致box1和box2的高度为0，一个高度为0的父盒子，包裹不住内部的子元素，从而子元素超出父盒子显示，而该父盒子后面的元素是紧挨着子元素进行排列的，从而导致对父盒子使用margin-bottom踹不到它后面的元素。
所以，设置margin-bottom向下踹的效果看起来是不生效的，如图
如果设置的是margin-top，对于box1和box2来说都是生效的（虽然高度为0，但是可以踹到上面的元素），如图
祝学习愉快！
2021-05-21 18:54:37
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星