Um zu verstehen, was ein Blockformatierungskontext bewirkt, versuche ich herauszufinden, was passiert, wenn ein BFC @ isnich erstellt.

Ich habe die folgende Demo von @ genommAlles, was Sie über Clearfix wissen, ist falsch:

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

aut diesem Artikel (Hervorhebung von mir):

In modernen Browsern:

Alle Elemente gehören zuderselbe Blockformatierungskontext so brechen angrenzende Ränder zusammen. Der Rand der Überschrift ragt aus dem Deckblatt heraus und stößt gegen dasp. Anders als im IE ist es dieser Rand (nicht der auf der Blackbox), der die Lücke über dem Wrapper erzeugt.

Ich kann nicht verstehen, worauf sich "derselbe Blockformatierungskontext" bezieht. Ich möchte wissen, warum ein so seltsames Layout ohne Blockformatierungskontext erstellt wird.

Ich habe versucht, das genaue Layout durch Hinzufügen von @ herauszufind* {border: 1px solid blue;} zu CSS, aber das gesamte Layout hat sich nach dieser Änderung stark geändert: Jetzt verhält es sich so, als obwrapper ist ein Block Formatierungskontext!

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

Bitte sag mir, was los ist.