使用不同方法创建的bfc有无区别?
触发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,为什么上面这个就可以了?
谢谢!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
"触发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。
建立新的BFC是为使二者处于不同的BFC。给 p 套一个 div 后,第二个 p 就处于这个 div 的BFC中了。但如果直接在 p 上建立BFC, p 内部元素倒是处于新的BFC,但 p 本身仍处于以前的BFC中。
边距折叠只可能发生在常规流内块级盒上, inline-block 是行内块盒,永远不会折叠边距。