为什么触发bfc后，原本不能包裹子元素的父元素就可以包裹子元素了呢

Question

如题

里面是一个什么原理呢。能够请大佬说一下吗？

当父div没设置高度的时候，子div都设置float，为何使用overflow;hidden；等可以触发BFC规则的条件，都能包裹住子div。这是为啥？原理是啥。QWQ

Answer 1

原理有两个：

1. overflow 不为 visible 触发新 BFC（除非 overflow 传播到 viewport）https://www.w3.org/TR/CSS22/v...
2. BFC root 高度计算会包裹内部 float 高度 https://www.w3.org/TR/CSS22/v...

Answer 2

BFC的特点之一就是计算高度的时候会计算内部的float元素

Answer 3

这个还真不好解释，BFC具有包裹性，一些属性会触发形成bfc，好像没有标准的定义，只知道它有这么一些特性，至于为什么会这样，只有去扒css引擎的源码才能知道了。

Answer 4

原理就是因为BFC存在这样一种特点。