html - 为什么float元素不会计算为div高度的一部分?BFC可以!CSS规范哪里说的?

标签 html css

我知道 float 元素不是正常流。但是规范说非正常流不会计算为父框高度的一部分。我在 css1.0 specification 中搜索这个和 css2.0 specification

当父框成为 BFC( block 格式化上下文)时, float 元素将被计算为 BFC 的一部分。但是,我也找不到规范中所说的 float 元素将作为一部分进行计算的地方。

这个问题让我困惑了很多年,虽然我知道BFC可以解决div的高度塌陷,但是,我不知道为什么?

最佳答案

从 CSS 2.2 9.5 Floats 中的声明推断出普通包含 block 不会增加高度来包围它们的 float 的规范。它说:

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist.

加上 Neeraj 已经说过的话:10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'

Only children in the normal flow are taken into account (i.e., floating boxes and absolutely positioned boxes are ignored, and relatively positioned boxes are considered without their offset).

规范中要求 BFC 包含 float 的部分是 CSS 2.2 10.6.7 'Auto' heights for block formatting context roots它说:

In addition, if the element has any floating descendants whose bottom margin edge is below the element's bottom content edge, then the height is increased to include those edges. Only floats that participate in this block formatting context are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.

关于html - 为什么float元素不会计算为div高度的一部分?BFC可以!CSS规范哪里说的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46642944/

相关文章:

html - 我的文本修饰(下划线)未在移动设备上显示

php - 有没有 'fun'交互式主页的好例子?这里有关于创建此类交互性的教程吗?

css - 使用 .bg- 类覆盖 Jumbotron 背景颜色

css - 网格 960 CSS 问题

html - 页脚内容对齐

javascript - 如何使用 Javascript 使 div 可滚动

html - 仅使用 CSS 的响应式视频 iframe(保持纵横比)?

css - 使用 CSS3 的梯形阴影

弹出菜单的CSS在Chrome中工作不同

css - 在表单中对齐文本区域