Skip to content

Is a box that establishes a BFC considered a Block Container? #11217

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
gitspeaks opened this issue Nov 14, 2024 · 10 comments
Closed

Is a box that establishes a BFC considered a Block Container? #11217

gitspeaks opened this issue Nov 14, 2024 · 10 comments
Labels
Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. css-display-3 Current Work

Comments

@gitspeaks
Copy link

Could you clarify if a box that establishes an independent formatting context is considered a block container? The spec is currently unclear on this point.

@gitspeaks
Copy link
Author

For example, a position value of absolute or fixed blockifies a box and forces it to establish an independent formatting context. Is the that box now considered a "Block container" ?

@Loirooriol
Copy link
Contributor

Is a box that establishes a BFC considered a Block Container?

Yes

Could you clarify if a box that establishes an independent formatting context is considered a block container?

Not in general.

a position value of absolute or fixed blockifies a box and forces it to establish an independent formatting context. Is the that box now considered a "Block container" ?

Forcing a box to establish an independent formatting context doesn't turn it into a block container. Either it was already a block container and then it will establish a BFC, or it was something else and will establish a different kind of formatting context, or "establish an independent formatting context" doesn't apply.

@Loirooriol Loirooriol added css-display-3 Current Work Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. labels Nov 14, 2024
@Loirooriol Loirooriol closed this as not planned Won't fix, can't repro, duplicate, stale Nov 14, 2024
@gitspeaks
Copy link
Author

But setting position: absolute forces the principal box to establish an independent formatting context, and we know that an absolutely positioned box establishes a BFC. Therefore, setting position: absolute makes the principal box a 'block container' regardless of its display status.

@Loirooriol
Copy link
Contributor

Loirooriol commented Nov 15, 2024

we know that an absolutely positioned box establishes a BFC

False, it can establish other kind of formatting contexts

setting position: absolute makes the principal box a 'block container' regardless of its display status

False, it can be another kind of container

@gitspeaks
Copy link
Author

According to the spec

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

@Loirooriol
Copy link
Contributor

CSS2 is outdated. As I pointed out in #11126 (comment)

@Loirooriol
Copy link
Contributor

In case you missed the big, red, bold warning:

@gitspeaks
Copy link
Author

So the note in the new spec:

"A position value of absolute or fixed blockifies the box, causes float to compute to none, and forces the box to establish an independent formatting context."

This means that:

  1. If the box has inner display: flow, flow-root, or table, it will establish a new BFC once it is positioned.
  2. If the box has inner display: flex, it will establish a new Flex Formatting Context once positioned.
  3. If the box has inner display: grid, it will establish a new Grid Formatting Context once positioned.
  4. If the box has inner display: ruby, it will establish a new Ruby Formatting Context once positioned.

@gitspeaks
Copy link
Author

Can the same be said on flex item ?

  1. If the flex item box has inner display: flow, flow-root, or table, it will establish a new BFC for its contents.
  2. If the flex item box has inner display: flex, it will establish a new Flex Formatting Context for its contents.
  3. If the flex item box has inner display: grid, it will establish a new Grid Formatting Context for its contents.
  4. If the flex item box has inner display: ruby, it will establish a new Ruby Formatting Context for its contents.

@Loirooriol
Copy link
Contributor

Basically, yes. If it's not replaced or some special HTML thing or such.

Also, about ruby, once blockified the principal box is a block container (see #9265) which will then establish a BFC, the ruby formatting context is established by a non-principal inline-level ruby container.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. css-display-3 Current Work
Projects
None yet
Development

No branches or pull requests

2 participants