老师，关于BFC
<style>
*{
margin: 0;
padding: 0;
}
p {
color: #f55;
background: yellow;
width: 200px;
line-height: 100px;
text-align:center;
margin: 30px;
}
p.box2{
overflow: hidden;
}
/*div{
overflow: hidden;
}*/
</style>
</head>
<body>
<p class="box1">看看我的 margin是多少</p>
<p class="box2">
<span>看看我的 margin是多少</span>
</p>
<!-- <p>看看我的 margin是多少</p>
<div>
<p>看看我的 margin是多少</p>
</div> -->
</body>上面的例子中，为什么我将下面的p，添加一个class变成BFC（overflow:hidden），他们的margin还是重叠
但是使用一个div将下面的p变成一个BFC，margin就不会重叠
20
收起
正在回答 回答被采纳积分+1
2回答
好帮手慕言
2020-07-14 10:54:59
同学你好，按照同学提供的例子，如果使用overflow: hidden;清除两个元素垂直方向的margin重叠，要使用下方的结构才可以
bfc是一个独立的布局环境，其中的元素布局不受外界的影响。在第一段代码中，两个p标签在一个布局环境中，第二个p标签的子元素与第一个p标签在不同的布局环境中
同学可以参考老师讲解的例子，再理解下。
链接：https://class.imooc.com/lesson/1033#mid=24900
如果有不明白的地方，可以再提问，老师帮助解答。祝学习愉快~
4.Vue与React高级框架开发
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理，通过ES6基础知识和前端主流高级框架的学习，助你快速构建企业级移动webAPP应用，进入职场的终极battle
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星