溢出:隐藏容器不包含浮动的相邻元素

时间:2016-08-16 17:13:20

标签: html css css-float overflow

我的overflow: hidden容器内部不包含相邻的浮动元素(橙色框)。

浮动元素位于容器(部分)旁边。但是当我删除overflow:hidden时,相邻的浮动元素将进入容器内部并尊重容器的浮动子项。

为什么会这样?它与块格式化上下文有什么关系吗?

也许当我为容器应用overflow: hidden;时,它会触发一个新的BFC并且只包含它的子节点而没有相邻的浮动元素?

这是fiddle

1 个答案:

答案 0 :(得分:1)

我猜你已经知道它是BFC的答案了。 :)

如果你设置了溢出(除了可见),那么它会创建一个新的块格式化上下文,并且它不会在相邻的浮动元素中使容器被邀请。

这就是为什么如果你保持overflow: hidden橙色div就在容器旁边。

检查出来:

CSS overflow:hidden with floats

BFC info