In order to become a skilled CSS developer, you need to understand the underlying concepts of CSS that make it work and not just how to produce certain visual effects. The "block formatting context" is one of those concepts that drives how CSS affects your page without you even knowing it.
The easiest way to think about a block formatting context is as an isolated container that controls the layout of the boxes within it without regard for elements outside of it. For instance, when you float a div, it establishes a new block formatting context. Nothing inside the float will interact with anything outside the float.
But not every div establishes a new block formatting context, nor are divs the only elements that can establish them. Any block element can establish a new block formatting context if it has one of the following property/value pairs set on it:
This is all well and good, but what's the point of setting a new block formatting context? Most of the time, you don't need to worry about it, it's just something that's going on behind the scenes that you don't need to get involved with. Sometimes, however, the lack of a new context can make elements interact in undesirable ways. The primary reason for setting a new context is to keep cleared elements inside a main content div from clearing floated sidebars. We'll use this problem as a case study for how to establish new block formatting contexts and to see what their effect is on the other elements around them.
Let's look at an example of the sidebar clearing problem. Download the support files for the article by clicking on the download link at the bottom of any page. Open page1.html in Firefox. The two photos are both floated left, but because there's enough room to the right of the first one, the second photo moves up to fill in that space. To force the photos to stack on top of each other, open the page in Dreamweaver, go to Code View, locate the img rule in the style section in the head, and add clear: left to it. Preview the page in Firefox. You will see that the second photo does indeed clear the first one and stack beneath it, but now the photos also clear the left-floated sidebar (Image 1).
Image 1
This is a very common problem in float-based layouts. To keep the clear property constrained to just the content of the current parent div, instead of clearing divs outside the parent as well, make the parent establish a new block formatting context. The easiest way to do this is to float the parent div as well.
Go back to Dreamweaver and locate the rule for #content in the style section in the head. Modify it to match the following rule:
#content {
float: left;
width: 480px;
padding: 1px 10px;
background-color: #99FFCC;
}
The content div is now also a float, with a width set to take up the space left beside the sidebar div. The left margin has been removed because the sidebar div will not overlap another float: the content div will automatically sit 200 pixels from the left because the sidebar float pushes it over. Preview the page again, and you will see that the clears only clear other elements within #content and do not clear the sidebar.
This is the easiest and most cross-browser compatible way to establish a new block formatting context. However, it won't work for all layouts. For instance, what if the content div needed to remain fluid in width? Without a width assigned, it couldn't be floated because it would just expand to 100 percent of its container and drop down beneath the sidebar. So, for fluid/liquid layouts, a different property needs to be used to set the new context.
Setting display: table, overflow: auto, or overflow: hidden are your best options for establishing block formatting contexts when the float property can't be used instead. Each works in all modern browsers, but they have different older browsers that they fail in, so your specific browser support requirements should help you decide which to use. Here's a run-down of the support details for each.
When you create a layout with a floated sidebar, you give the non-floated content div a matching side margin for the sidebar to sit in. This is because floats overlap other divs, only pushing their content over, unless you give appropriately wide margins to the adjacent divs. However, if you use one of these methods to establish a new block formatting context, you need to remove this margin. This is for the same reason that we removed the side margin from the content div in page1.html when we floated it. Floats don't overlap each other, and neither will a float overlap an element that establishes a new block formatting context.
To see this in action, open page2.html from the support files. This page has the same problem of the floated and cleared photos clearing the sidebar. To fix it, go into Code View and add overflow: auto to the #content rule. Preview the page. You will see that the clearing problem is fixed, but now there is a large space between the sidebar and content divs (Image 2). This is the 200-pixel left margin on the content div. It previously sat underneath the float, but now that the content div has a new context, it moves out from underneath the float completely. To fix this, remove the margin rule entirely.
Image 2
Another thing you may notice is that there's a block of pink appearing beneath and between the two columns now. This is because setting overflow has the happy side effect of forcing the container div to contain whatever has the overflow property set on it. Setting display: table can be used as float containment method as well.
If you do want some small margin between the two columns, say 20 pixels, you can add it back as a margin-left value to the content div. However, Safari and Opera (up to the new version 9, where this bug is fixed) incorrectly slide this margin under the float, so the spacing will not show up in those browsers. To get around it, apply the margin as right margin to the sidebar or as left padding on the content div, whichever works better in your design.
The block formatting context is a CSS concept that controls how blocks interact with one another. Key characteristics to remember are:
Thanks to Philippe Wittenbergh for his great tests on block formatting contexts.
Keywords
CSS, cascading style sheets, styles, floats, floating, sidebars, clears, clearing, block formatting context, overflow, display table
