css

为什么overflow:hidden能清除浮动的影响?

发布于 2021-11-08 22:11:46

为什么overflow:hidden能清除浮动的影响

查看更多

浏览量
2180
猫哥
猫哥 项目组成员 2021-11-08
更多问题可加猫哥QQ(632906391)寻求帮助

通常认为 overflow:hidden 是隐藏超界的元素内容的,但它还有另一种作用,就是清除子元素的浮动.一只没搞明白它的原理.

现在终于明白了,在布局中有一种 BFC(block formatting context) 的规则,它的特性是保证BFC容器里的元素不影响到外面的元素,自身的高度计算时,浮动的元素也会参与计算

也就是说,对于一个BFC容器来讲,BFC是绝不允许自己的内容元素跑到外面去,外面的元素影响到自身内部的元素,就像是一个温暖的家保护这自己拥有的一切

那怎么样才算是一个 BFC 容器元素呢?(满足以下任意一个条件即可)

  • float neq 'none' 父元素浮动的情况
  • overflow neq visible 本文讨论的情况
  • position eq fixed or absolute 父元素脱离文档流
  • display eq table-cell/table-caption/inline-block/inline-flex
1 个回答

发布
问题

分享
好友

手机
浏览

扫码手机浏览