float: footnote pulls an element out of normal flow entirelycss-gcpm-3 defines this alongside float: inline-footnote and column-scoped variants; PeachPDF supports the page-level case., leaving a numbered in-flow reference behind and routing the element's own content to a note area at the bottom of the page the reference landed onThe note area's height is reserved dynamically, based on how many footnotes actually land on a given page - not a fixed-height margin box..
Because the reservation is dynamic, content already flowing down the page correctly stops above it even when a paragraph asks to stay together as one unit:
This paragraph carries break-inside: avoid. Once the footnote area above claims room at the foot of the page, this whole paragraph is kept together and, if it no longer fits, moves to the next page as a unit rather than splitting across the reserved stripA third footnote, to show the reservation composing across every footnote that lands on the same page..
Numbering resets per page - the next page starts back at 1:
A fresh page, a fresh footnoteThis is footnote 1 again, not 4 - the footnote counter resets per page..