html - Block Formatting Contexts, Collapsing Margins and Floating Containers

Question

In order to understand what does a block formatting context do, I'm trying to find out what's going on when a BFC is not created.

I took the following demo from Everything you Know about Clearfix is Wrong:

.wrapper {
  width: 740px;
  background: #cccccc;
}
.leftSidebar {
  float: left;
  width: 200px;
}
.rightSidebar {
  float: right;
  width: 200px;
}
.mainContent {
  padding-right: 200px;
  padding-left: 200px;
}
.floatMe {
  float: left;
  background: teal;
  color: #fff;
}

<div class="wrapper">
  <div class="leftSidebar">
    <h2>Heading</h2>
    <pre>.leftSidebar {
  float:left;
  width:200px;
}</pre>
  </div>
  <div class="rightSidebar">
    <h2>Heading</h2>
    <pre>.rightSidebar {
  float:right;
  width:200px;
}</pre>
  </div>
  <div class="mainContent">
    <h2>Heading</h2>
    <pre>.mainContent {
  padding-right:200px;
  padding-left:200px;
}</pre>
    <div class="floatMe">
      <pre>.floatMe {
  float:left;
  background:teal;
  color:#fff;
}</pre>
    </div>
  </div>
</div>

Answer 1

Good question, got me thinking a lot!

There are lot of concepts at play here, so I'll get to them one by one:

Buggy IE:

Whatever is mentioned in this old article about IE can be easily ignored if you do not have to design for IE7 or IE8 compatibility mode. This behavior is due to hasLayout property used internally by IE7.

See this MSDN doc for IE7:

What is "HasLayout" and why is it important?

There are several bugs in Internet Explorer that can be worked around by forcing "a layout" (an IE internal data structure) on an element.

Clearly this is a non-standard workaround and along with brings up a lot of inconsistencies. Read about this here too.

Block Formatting Context (BFC):

Excerpts from this MDN doc:

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.

BFCs are very important for positioning and clearing of floated elements- floated elements affects only within the same BFCs. When you float an element, it is taken out of the flow and reinserted by "floating".

See the examples below:

1. The inside of wrapper is a BFC where you float one div to left and another to the right.

2. The floated elements are reinserted into the BFC while rendering around the element that is not floated.

3. As you have not cleared the floating in the BFC, the wrapper height will extend to the size of the element that is not floated.

       body{
         margin: 0;
       }
       *{
         box-sizing: border-box;
       }
       .wrapper{
         border: 1px solid;
       }
       .wrapper > * {
         display: inline-block;
         border: 1px solid red;
         width: 33.33%;
         height: 100px;
       }
       .left{
         float: left;
       }
       .right{
         float: right;
       }
       .center{
         height: 50px;
       }

       <div class="wrapper">
         <div class="left">Left</div>
         <div class="center">Center</div>
         <div class="right">Right</div>
       </div>