Block formatting contexts
TL;DR Block formatting contexts establish an isolating container.
clear only apply to elements within such a container.
Block formatting contexts (BFCs) are important for the positioning and clearing
of floats. The rules for positioning and clearing of floats apply only to
things within the same block formatting context.
Floats do not affect the layout of things in other block formatting contexts,
clear only clears past floats in the same block formatting context.
How to create a new block formatting context
A block formatting context is created by one of the following:
float: (not "none")
overflow: (not "visible")
- and more, see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
Example: A fluid main area with a right sidebar
In a two-column layout you don't want either column to clear content of the other. Float the sidebar to the right and you're set: its content now renders in the sidebar's own block formatting context.
clear: <both|right> in the main area still clears the sidebar, which is undesirable. You need to give the sidebar an own BFC. Since there is no actual "command" to create one, you need to hack it.
Below see a list of issues and side effects with BFC-creating properties on the main area.
- Best solution:
- This is the only reliably working property, use it whenever you can. Caution: This will literally cut off any content that leaves the container. You must not specify a height on the main area so it can stretch as needed. If any content ever needs to overlap the main area's borders, try adding padding (no pun intended).
- Floating elements are taken out of their surrounding context, which is why a floating main area would not "know" about the location of the sidebar. Thus, it cannot responsively stretch to the sidebar's left edge. Bad.
- This is worse than floating. The main area will now grow out of its container and overlap e.g. the footer.
- Again, an inline element will not stretch to the available width.
- Tables also don't stretch to the available width. Adding
width: 100%will ignore the margin, making the main area "float" below the floating sidebar.