Solving Media Object Float Issues With CSS Block Formatting Contexts — Smashing Magazine

Gabriel is a front-end developer and technical writer. He specializes in HTML, CSS, JavaScript, React, Vue, TailwindCSS, and BootStrap, with a track record of … More about Gabriel ↬
Weekly tips on front-end & UX.Trusted by 182,000+ folks.
Let’s imagine we’re making a small component. It can be anything, really, but let’s use a media object as an example. Nicole Sullivan had a solid definition of media objects from way back in 2010, and you probably already know the pattern well: some form of media (often an image) on the left and text beside it on the right. The media could be an image or a video, for example.
See the Pen [Media Object Sample [forked]](https://codepen.io/smashingmag/pen/WNaGKNo) by Shoyombo Gabriel Ayomide.
A media object is a mini layout. The most popular and easy-to-implement layout approaches these days involve CSS Flexbox and Grid. Once upon a time, long ago, some developers might have gone for a table display method instead.
Although it was created to achieve a newspaper or magazine media display on websites, floats were the gold standard for creating layouts before Flexbox and Grid were introduced, even if it wasn’t specifically designed for that use. Again, not the easiest — or the best — way to approach a layout, even for something as small as a media object.
Why are we talking about floats in 2023? Flexbox and Grid are well-suited for the task of a media object, after all. It’s really a matter of preference, but one reason to use floats in media objects is that they can be more lightweight and require less markup compared to other layout methods. The goal here is not to convince you that floats are the single best approach for laying out media objects but to help work around the challenges of using floats in a situation like this. When a media element, like an image or video, interacts with text, floats are a valid option.
Often, developers encounter content-wrapping issues while using floats, and that’s especially true for media objects where one element is on one side and text is supposed to sit beside it on the other. For example, what if the text on the right is super long? It will naturally wrap around the element on the left if it exceeds that element’s height. Or it can overflow the container that contains it.
See the Pen [Untitled [forked]](https://codepen.io/smashingmag/pen/yLRaqyz) by Geoff Graham.
While some developers may see this kind of behavior as a bug, it is not. That’s just the float behaving as it should. In this article, we will discuss the concept of block formatting contexts in CSS and how to use it to eliminate media object float issues.
Meet Smashing Workshops on front-end, design & UX, with practical takeaways, live sessions, video recordings and a friendly Q&A. With Brad Frost, Stéph Walter and so many others.
A block formatting context (BFC) can be defined with or without respect to floats. Following the breakdown of the term into individual words, a BFC is a region (context) in which block-level elements are laid out (format). Referencing floats, a BFC is a section of a web page layout that restricts the positioning and clearing attributes of floated items to the containing block. This means that floated elements are contained within the block formatting context and will not interfere with other elements outside.
Several ways exist to create a block formatting context, some of which include:
Using any of the above CSS methods creates a block formatting context that contains floats within the container. Floats are merely one of them.
Going back to our example of a media object, we can get a good idea of the sorts of “issues” that come up when working with floats. In this case, let’s use a grid of testimonial cards as an example since all we really need in each card is an image and a block of text.
This is the basic HTML for the layout, minimized for brevity:
This HTML gives us a <section> element that is the container for four <article> elements, where each one is a testimonial container that holds an <img> and a <div> with a block of text — our media objects.
Let’s apply some light styling in CSS:
This code is by no means perfect. In fact, it introduces the wrapping and overflow issues we’re about to discuss. We will look at these issues together before getting into solutions.
When an element is floated in its container, it exits its normal document flow and into a floated position, making no contributions to the container’s height. In a container of many floated media objects, the container element’s height is collapsed to contain only non-floated elements. The collapsed height might be inconspicuous in containers without a border or non-floated elements and could disrupt the layout of other elements after a media object container. However, this issue can be easily discovered if there is a non-floated element in the container, among other floated elements.
Let’s add a border to the parent container to see the height-collapsing effect.
See the Pen [Float Issue: Height Collapse [forked]](https://codepen.io/smashingmag/pen/MWPjBQX) by Geoff Graham.
Yikes! The parent container that holds all of the testimonials isn’t actually tall enough to fit all of the testimonials.
Since floats are removed from the document’s normal flow, they can overlap with other elements on the page. This can cause unexpected spacing and layout issues which, in turn, lead to broken interactions with the element behind the floated element.
I’ve added a red border to the <h2> element that comes after the testimonials to see the issue more clearly.
See the Pen [Float Issue: Overlapping Elements [forked]](https://codepen.io/smashingmag/pen/bGmwjvR) by Geoff Graham.
Imagine if that was a form instead of a heading. Clicking on a media object would actually put focus on the form instead of the media object! That can be an annoying experience.
It’s weird to call this an “issue” because wrapping around media elements is exactly what floats are designed to do. But, hey, ha