使用不同方法创建的bfc有无区别?

发布于 2022-09-01 16:44:01 字数 654 浏览 20 评论 0

触发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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

风吹短裙飘 2022-09-08 16:44:01

"触发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。

攀登最高峰 2022-09-08 16:44:01

建立新的BFC是为使二者处于不同的BFC。给 p 套一个 div 后,第二个 p 就处于这个 div 的BFC中了。但如果直接在 p 上建立BFC, p 内部元素倒是处于新的BFC,但 p 本身仍处于以前的BFC中。

边距折叠只可能发生在常规流内块级盒上, inline-block 是行内块盒,永远不会折叠边距。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文