- From: Nico Burns via GitHub <sysbot+gh@w3.org>
- Date: Mon, 11 Nov 2024 04:23:26 +0000
- To: public-css-archive@w3.org
I'm also observing 4 ii (in all of Chrome/Firefox/Safari): > If the child continues the same BFC (instead of establishing an independent formatting context), > Set clear := both (this is to avoid adding its size to the floats) But this seems weird to me. Why does a "same bfc block" (without clear) trigger wrapping when neither an inline element or a "new bfc block" do? Specifically, while a "same bfc block" will overlap floats defined just prior to it in the document, any (inline) content within that block will be placed below those overlapping floats. Whereas inline elements defined directly in the same block as the floats will be placed beside the floats. Intuitively, a "max-content" size should *never* wrap (except for hard-wraps triggered by things like `<br />` and `clear`), and it seems odd that an inline element within a "same bfc block" will place itself below a float. <img width="626" alt="Screenshot 2024-11-11 at 17 22 44" src="https://github.com/user-attachments/assets/aa25848e-4def-495f-95a9-e148cd2b6d76"> <details> <summary>Sample HTML:</summary> ```html <!DOCTYPE html> <html lang="en"> <body> <div style="display: block; width: max-content; border: 2px solid green"> <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div> <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div> <div style="display: flow-root">Flow Root</div> <div style="display: flow-root">Flow Root</div> <div style="float: right; width: 50px; height: 50px; border: 2px solid red;"></div> <div style="display: flow-root">Flow Root</div> </div> <div style="clear:both; border: 2px solid black;margin: 10px 0;"></div> <div style="display: block; width: max-content; border: 2px solid green"> <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div> <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div> Inline content<br /> Inline content<br /> <div style="float: right; width: 50px; height: 50px; border: 2px solid red;"></div> Inline content<br /> </div> <div style="clear:both; border: 2px solid black;margin: 10px 0;"></div> <div style="display: block; width: max-content; border: 2px solid green"> <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div> <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div> <div style="display: flow-root">Flow root</div> <div style="display: flow-root">Flow root</div> <div style="float: right; width: 50px; height: 50px; border: 2px solid red;"></div> <div style="display: block">Same BFC</div> </div> <div style="clear:both; border: 2px solid black;margin: 10px 0;"></div> <div style="display: block; width: max-content; border: 2px solid green"> <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div> <div style="float: left; width: 50px; height: 50px; border: 2px solid red;"></div> <div style="display: block">Same BFC</div> <div style="display: block">Same BFC</div> <div style="float: right; width: 50px; height: 50px; border: 2px solid red;"></div> <div style="display: block">Same BFC</div> </div> </body> </html> ``` </details> -- GitHub Notification of comment by nicoburns Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9120#issuecomment-2467204622 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 11 November 2024 04:23:27 UTC