Time for the next CSS interview question from the list of front end interview questions. My goodness that repo has a LOT of questions to get through!
What is Block Formatting Context (BFC)?
It seems that BFC is something that I’ve always assumed was part of how floats worked, and hadn’t realised was it’s own concept with a name. So if you’ve been playing with floats for a while (or if you’ve upgraded to flexbox) then this probably won’t be interesting to you. But hey - it’s always good to understand things more deeply!
From MDN:
A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other
Yawn, what was that?
Ok, so a block formatting context is an area where block boxes and floats go. I think of it as a containing element that has flow rules (so the block boxes are, well, block-y) and hard boundaries (so the floats don’t leave the container). Ultimately the page is a block formatting context, but you can have a bunch in a page. Actually, you can have BFCs in BFCs, Inception style. While that sounds cool (I mean, I just talked about Inception in a CSS post - that’s gotta count for something!), that’s what most of HTML and CSS is (divs within divs).
Ok, so you’re telling me BFCs are totally normal CSS and nothing particularly interesting.
Well, yes, but they also have some handy features. Let’s talk about them now.
Block formatting contexts:
- stop margins from collapsing
- restrain floats
- contain floats
Block formatting contexts stop margins from collapsing
What normally happens?
Since both of those divs have 20px of margin around them you’d expect to see 20px of margin at the top and bottom as well. But actually there’s no margin there, that’s because CSS automatically collapses margins.
Now let’s check it in a block formatting context:
Boom! See all that extra margin at the top and bottom? That’s because of the block formatting context! Now, in case you don’t feel like looking at the source, I made the containing div a BFC by giving it overflow: hidden;. Simple :)
Block formatting contexts restrain floats
Here’s what it looks like normally:
That’s probably not what you want your two column layout to look like. Don’t worry, we can fix it!
Here it is with block formatting context properly enabled:
As you an see, this ability makes BFCs really handy for doing column layouts.
Block formatting contexts contain floats
Here’s what it looks like normally:
This time we’re trying to wrap two floated elements in a border. Obviously it didn’t work as expected. It’s actually worse than that. I had to add an invisible div with clear: both; (typically called a “clearfix”) before this paragraph to make sure the line breaks work properly. We shouldn’t need to do that!
Now we’ll add block formatting context:
Woot! Two boxes floating next to each other with a border around them and without using a clearfix. All by using a block formatting context!
Resources
- MDN
- VG Tech
- Max Design - this one was particularly useful since it has a bunch of examples
- YUI