Wie funktioniert die CSS-Formatierung des Blocks Kontext arbeiten?

Block Formatting Contexts

Schwimmern, absolut positioniert
Elemente, block-Container (wie
inline-Blöcke, Tisch-Zellen, und
Tabelle Untertitel), die sind nicht blockiert
Boxen und block-Boxen mit "überlauf"
andere als 'sichtbar' (außer wenn das
Wert propagiert wurde, um die
viewport) Schaffung neuer block formatting contexts für deren Inhalte.

Mit meinem Fett, es ist die etablieren bit, das ist wichtig

Was dies bedeutet ist, dass das element, das Sie verwenden overflow (alles andere als sichtbar) oder float oder inline-block..etc auf wird verantwortlich für das layout der untergeordneten Elemente. Es ist die child-Elemente, die sind dann "enthalten" - egal, ob es schwimmt oder reduzieren die Margen, die Sie sollten vollständig enthalten durch Ihre bounding Eltern.

In einer block-Formatierungs-Kontext, jeder
box linke äußere Kante berührt die linke
Kante des umschließenden Blocks (für
rechts-nach-Links-Formatierung, die rechten Kanten
touch)

Was die obige Zeile bedeutet:

Weil eine box kann nur rechteckig sein und nicht unregelmäßig geformten dies bedeutet einen neuen block formatting context zwischen zwei Schwimmern (oder sogar neben eine) werden nicht wrap-around benachbarten Seite schwimmt. Mit dem inneren Kind-Boxen können nur so weit erstrecken, wie zu berühren Ihre Eltern Links (oder rechts in der RTL -) Rand. Es ist dieses Verhalten sinnvoll, für säulenförmig Stil layouts. Der Hauptzweck es ist jedoch zu stoppen, schwebt, in einem "main content" div, eigentlich Lichtung schwebte side-Spalten, d.h. Schwimmer, die erscheinen früher im Quelltext.

---

Float Abstand

Unter normalen Umständen Schwimmer werden soll, löschen Sie alle vorherigen schwebte Elemente, die zuvor schwebten die ganze source-code, nicht nur Ihre angezeigt "Spalte"
Die sagen, Zitat aus dem "float Abstand specs" ist:

Diese Eigenschaft gibt an, welche Seiten der
ein element s box(es) kann nicht sein
neben einer früheren floating-box.
Die 'clear' - Eigenschaft nicht berücksichtigen
schwimmt in dem element selbst oder in andere block formatting contexts

Also sagen, Sie haben ein drei Spalten layout, wobei die linke und Rechte Spalte schwebte Links und rechts jeweils die seitlichen Spalten sind nun im neuen Block Formatting Contexts, weil Sie schwebte werden (denken Sie daran float ist auch eine der Eigenschaften, die die Gründung einer neuen BFC), so können Sie gerne auf float-Liste Elemente in Ihnen, und Sie nur klar schwimmt die bereits in die Seite Spalten Sie sich nicht mehr kümmern schwimmt vorher in der source-code

---

Auf die wichtigsten Inhalte eine neue Block-Formatierungs-Kontext oder nicht?

Nun, dass im mittleren Spalte, können Sie einfach Rand es von beiden Seiten, so dass es scheint, zu sitzen ordentlich zwischen den beiden Seiten schwebte Spalten und nehmen die restlichen Breite, einen gemeinsamen Weg, um die gewünschte Breite, wenn die Mittelsäule ist "fluid" - das wird in Ordnung sein, bis Sie brauchen, um verwenden Sie die Schwimmer/Freiraum in Ihrem Inhalt div (ein gemeinsames auftreten für diejenigen, die sich mit "clearfix" hacks oder Vorlagen, einschließlich Ihnen)

Nehmen diese sehr einfachen code:

CSS:

#left-col {
  border: 1px solid #000;
  width: 180px;
  float: left;
}
#right-col {
  border: 1px solid #000;
  width: 180px;
  float: right;
  height: 200px;
}
#content {
  background: #eee;
  margin: 0 200px;
}
.floated {
  float: right;
  width: 180px;
  height: 100px;
  background: #dad;
}

HTML:

<div id="left-col">left column</div>
<div id="right-col">right column</div>

<div id="content">
  <h3>Main Content</h3>
  <p>Lorem ipsum etc..</p>
  <div class="floated">this a floated box</div>
  <div class="floated">this a floated box</div>
</div>

Produziert es die folgende:

Dies ist In der Regel gut, vor allem, wenn Sie keine hintergrund-Farben oder interne (im main-content), Schwimmer - beachten Sie die Schwimmer sind in Ordnung (noch nicht gelöscht) Sie tun wahrscheinlich das, was Sie, außer Sie aber Sie, die H3's top-margin und die p's am unteren Rand sind eigentlich nicht wirklich, die durch den content-div (hellgrau hinterlegt).

So, um das gleiche einfach mit margin-Szenario der obige code hinzufügen:

.clear-r {clear: right;}

des CSS, und ändern Sie die zweite HTML-Schwamm-box zu:

<div class="floated clear-r"> this a floated cleared box</div>

CSS:

#left-col {
  border: 1px solid #000;
  width: 180px;
  float: left;
}
#right-col {
  border: 1px solid #000;
  width: 180px;
  float: right;
  height: 200px;
}
#content {
  background: #eee;
  margin: 0 200px;
}
.floated {
  float: right;
  width: 180px;
  height: 100px;
  background: #dad;
}
.clear-r {
  clear: right;
}

HTML:

<div id="left-col">left column</div>
<div id="right-col">right column</div>

<div id="content">
  <h3>Main Content</h3>
  <p>Lorem ipsum etc..</p>
  <div class="floated">this a floated box</div>
  <div class="floated clear-r">this a floated cleared box</div>
</div>

Dieser Zeit bekommen Sie dies:

Den zweiten float-clearing der rechten Seite, aber es ist das komplette löschen der Höhe der rechten Spalte. Die Rechte Spalte wird schwammen früher in den Quellcode, so dass es dem clearing ist es, wie gesagt! Wahrscheinlich nicht die gewünschte Wirkung, obwohl, beachten Sie auch die h3 und p Margen sind immer noch zusammengebrochen (nicht enthalten).

---

Machen Sie es schaffen einen Block Formatting Context, zum Wohle der Kinder!

machen und schließlich die main-content-Spalte übernehmen Verantwortung - zu einem Block Formatting Context für den Inhalt : entfernen margin: 0 200px; von der Haupt-content CSS und HINZUFÜGEN overflow: hidden; erhalten Sie dies:

CSS:

#left-col {
  border: 1px solid #000;
  width: 180px;
  float: left;
}
#right-col {
  border: 1px solid #000;
  width: 180px;
  float: right;
  height: 200px;
}
#content {
  background: #eee;
  overflow: hidden;
}
.floated {
  float: right;
  width: 180px;
  height: 100px;
  background: #dad;
}
.clear-r {
  clear: right;
}

HTML:

<div id="left-col">left column</div>
<div id="right-col">right column</div>

<div id="content">
  <h3>Main Content</h3>
  <p>Lorem ipsum etc..</p>
  <div class="floated">this a floated box</div>
  <div class="floated clear-r">this a floated cleared box</div>
</div>

Dies ist wahrscheinlich viel mehr mögen, was Sie erwarten würden, um zu passieren, beachten Sie nun die floats enthalten sind, reinigen Sie richtig ignorieren der rechten Seite der Spalte, und auch die h3 und p Margen enthalten sind, statt zusammengebrochen.

Mit der umfangreichen Verwendung von setzt in diesen Tagen die Ränder sind weniger Auffällig (und IE noch erhalten Sie nicht ganz richtig) aber was ist nur passiert, um das Zentrum "Haupt-content" ist, dass es wurde eine Block-Formatierungs-Kontext und ist nun verantwortlich für sein eigenes Kind (Nachkomme) Elemente. Es ist eigentlich sehr ähnlich wie Microsoft den frühen Tagen, Vorstellung von hasLayout, verwendet er die gleichen Eigenschaften display: inline-block, float, und overflow alles andere als sichtbar, und natürlich die Tabellenzellen immer layout.. es ist allerdings ohne den Fehler 😉

Hoffe, das hilft ein bisschen, Fragen fühlen Sie sich frei zu Fragen!

---

Update: wieder mehr Informationen in die Frage:

Wenn Sie sagen, "aber floating elements werden ignoriert, wenn die Benutzer-agent-zieht-box und nehmen Sie in Konto, wenn Sie füllen content."

Schwimmt ja normalerweise overlay-Ihre container-Boxen, ist das, was Sie meinen, über den Eltern Grenzen? Wenn ein block-element gezogen wird, und es enthält einen Schwimmer der block Elternteil selbst wird als Rechteck gezeichnet, die unter den Schwimmer, und es ist die "anonyme inline-Boxen" oder einfach "line boxes" von der anderen child-Elemente, die sind gekürzt, um Platz für das float -

Nehmen Sie diesen code:

CSS:

#content {
  background: #eee;
  color #000;
  border: 3px solid #444;
}
.float {
  background: rgba(0, 0, 255, 0.5);
  border: 1px solid #00f;
  width: 150px;
  height: 150px;
  float: left;
  margin: 10px;
}
p {
  background: #444;
  color: #fff;
}

HTML:

<div id="content">
  <div class="float">floated box</div>
  <h3>This is a content box</h3>
  <p>it contains a left floated box, you can see the actual content div does go under the float, but that it is the &lt;h3&gt; and &lt;p&gt; <b>line boxes</b> that are shortened to make room for the float, this is normal behaviour</p>
</div>

Produziert diese:

Sehen Sie, dass das übergeordnete element nicht tatsächlich enthalten die schweben, wie es funktioniert nicht wickeln Sie es nicht ganz.. der Schwimmer ist einfach floating auf der Oberseite der Inhalte - wenn Sie halten das hinzufügen von Inhalten auf das div würde es letztendlich wrap unter den Schwimmer, da gäbe es keine Notwendigkeit für die (anonyme) "line boxes" der p element zum verkürzen sich nicht mehr.

Coloriert habe ich das Absatz-element, so dass Sie sehen können, dass es auch wirklich geht, unter dem Schwimmer, dem dunkelgrauen hintergrund, wo der Absatz beginnt, der weiße text ist, wo die "anonymous-line box" startet - es ist nur tatsächlich, dass Sie "Platz machen" für den Schwimmer, es sei denn, Sie sagen es auf andere Weise (D. H. Sie ändern den Kontext)

Wieder unter Bezugnahme auf das obige Bild, wenn Sie wurden an den Rand der linken Seite desp element, ja, es wird halt den Textumbruch unter der Unterseite des Schwimmers, da der "line boxes" (der weiße text) wird nur die Berührung der linken Kante der container, und bringen Sie den farbigen hintergrund der p auf der rechten Seite, klar der schwimmen, aber Sie nicht haben, verändert das Verhalten der p's Formatierung Kontext. Wie die Mittelsäule auf dem ersten Bild Weg oben 😉