Posted over 4 years ago. Visible to the public.

Block formatting contexts

TL;DR Block formatting contexts establish an isolating container. float
and clear only apply to elements within such a container.

About

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,
and 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:

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.

However, a 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: overflow: hidden
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).
float
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.
position: <absolute|fixed>
This is worse than floating. The main area will now grow out of its container and overlap e.g. the footer.
display: inline-block
Again, an inline element will not stretch to the available width.
display: <table|table-cell>
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.

Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.

Owner of this card:

Avatar
Dominik Schöler
Last edit:
about 1 month ago
by Dominik Schöler
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Dominik Schöler to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more