使用不同方法创建的bfc有无区别？
按现在的理解，要解决两个段落间边距合并，要在一个段落外套一个div，并设置overflow: hidden;，如下：
<div>
<p>1<p>
<div class="bfc">
<p>2</p>
</div>
</div>
.bfc{
overflow: hidden;
}1.但是，既然设置overflow之后，按理就已经触发了bfc，为何不能在第二个p标签中设之overflow属性而非要再添加一个div才能生效？也就是，下面这样为什么不能生效？
<div>
<p>1</p>
<p class="bfc">2</p>
</div>2.如果用display: inline-block;来触发bfc，为什么上面这个就可以了？
谢谢！
写回答
-
IT从业"触发bfc能解决margin collapse"这句话本身就有问题，触发bfc（这句话其实也有问题，更确切的说法是建立的新bfc（establish new block formatting context），bfc是个名词啊)之所以能解决margin collapse，是因为margin collapse的一个前提条件是“处于同一bfc下的相邻元素可能发生margin collapse”，新建bfc影响的是子元素所处的bfc，自身所处的bfc不受影响，故父元素新建bfc使得父元素在老bfc下，子元素在父元素新建立的bfc下，所以生效，但是若子元素新建bfc，那么父元素和子元素仍然处于原有的bfc下，子元素的子元素才处于新的bfc下，既然父子元素仍然处于同一bfc，当然不生效啦。
另inline-block触发ifc，ifc下永远不发生maragin collapse。2019-07-17 19:42:11赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
