TIL how to clear floats

Gunnar Bittersmann
@gunnarbittersmann

1 / 7

clearfix helper classes on container elements
(with frameworks like Bootstrap and UIkit)
We don’t need no framework.
display: flow-root FTW!

Resources

The following resources were mentioned during the presentation or are useful additional information.

The following code examples from the presentation can be tried out live.

Here’s what was said about this presentation on social media.

IIRC @jensimmons has mentioned in one of her Layoutland videos a new property (or value?) that lets an element enclose floats, i.e. which replaces the clearfix hack. What’s its name?
— Gunnar Bittersmann (@g16n) February 22, 2021
Display: flow-root
— Jen Simmons (@jensimmons) February 22, 2021
#Bahnzeit in Prag hl.n. (Hbf.) pic.twitter.com/YLcBn5F3ku
— Gunnar Bittersmann (@g16n) February 3, 2023
Look Ma, @atpok and @jaroslavrudis, Praha hl.n. made it onto the title slide of my latest presentation. (And Království železnic onto another slide.) https://t.co/rT74plmFfJ
— Gunnar Bittersmann (@g16n) February 10, 2023
There is some difference between the effects of the "clearfix" hack and the new Block Formatting context, like margin collapsing and interaction with floats earlier in the flow https://t.co/mA3M50VCkf 😳
— Ст. 122 УК РБ (@SelenIT2) February 10, 2023