Para entender o que faz um contexto de formatação de bloco, estou tentando descobrir o que está acontecendo quando um BFC énão criado.

Tirei a seguinte demonstração deTudo o que você sabe sobre o Clearfix está errado:

.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>

De acordo com esse artigo (ênfase minha):

Nos navegadores modernos:

Todos os elementos pertencem ao mesmo contexto de formatação de bloco margens adjacentes colapsam. A margem do cabeçalho "sobressai" do invólucro para encostar nop. Diferentemente do IE, é a margem (não a da caixa preta) que cria a lacuna acima do invólucro.

Não consigo entender ao que "o mesmo contexto de formatação de bloco" se refere. Quero saber por que um layout tão estranho é produzido sem um contexto de formatação de bloco.

Eu tentei descobrir o layout exato adicionando* {border: 1px solid blue;} para CSS, mas o layout geral mudou bastante após essa alteração: agora ele se comporta como sewrapper é um contexto de formatação de bloco!

.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;
}
* {
  border: 1px solid blue;
}

<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>

Por favor me diga o que está acontecendo.