css

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

发布于 2019-11-18 12:16:39

通常认为 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
0 条评论

发布
问题