Чтобы понять, что делает контекст блочного форматирования, я пытаюсь выяснить, что происходит, когда BFCне создано.

Я взял следующее демо изВсе, что вы знаете о Clearfix, неверно:

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

Согласно этой статье (выделение мое):

В современных браузерах:

Все элементы принадлежаттот же контекст форматирования блока поэтому соседние поля разрушаются. Поле заголовка «торчит» из обертки, чтобы упираться вp, В отличие от IE, это поле (а не поле черного ящика) создает зазор над оболочкой.

Я не могу понять, что означает "тот же контекст форматирования блока". Я хочу знать, почему такой странный макет создается без контекста форматирования блока.

Я попытался выяснить точный макет, добавив* {border: 1px solid blue;} в CSS, но общий макет сильно изменился после этого изменения: теперь он ведет себя так, как будтоwrapper является контекст форматирования блока!

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

Пожалуйста, скажите мне, что происходит.