触发bfc能解决margin collapse,在使用的同时也发现了一个问题。
按现在的理解,要解决两个段落间边距合并,要在一个段落外套一个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,为什么上面这个就可以了?
谢谢!
"触发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。