通常认为 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 个回答
热门文章
热门问题
