CSS-Flusslayout

Normaler Fluss oder Flusslayout ist die Art und Weise, wie Block- und Inline-Elemente auf einer Seite angezeigt werden, bevor Änderungen an ihrem Layout vorgenommen werden. Der Fluss ist im Wesentlichen eine Reihe von Dingen, die alle zusammenarbeiten und sich gegenseitig in Ihrem Layout kennen. Sobald etwas aus dem Fluss genommen wird, funktioniert es unabhängig.

Im normalen Fluss werden Inline--Elemente in der Inline-Richtung angezeigt, also in der Richtung, in der Wörter in einem Satz entsprechend dem Schreibmodus des Dokuments angezeigt werden. Block--Elemente werden hintereinander angezeigt, wie es Absätze im Schreibmodus des Dokuments tun. Im Englischen werden Inline-Elemente also hintereinander angezeigt, beginnend von links, und Block-Elemente beginnen oben und bewegen sich die Seite hinunter.

Grundlegendes Beispiel

Das folgende Beispiel demonstriert Block- und Inline-Ebenen-Boxen. Die beiden Absatz-Elemente mit einem grünen Rahmen sind Block-Ebene und werden untereinander angezeigt.

Der erste Satz enthält auch ein span-Element mit einem blauen Hintergrund. Dies ist auf Inline-Ebene und wird daher im Satz angezeigt.


  
    One November night in the year 1782, so the story runs, two
    brothers sat over their winter fire in the little French town of Annonay,
    watching the grey smoke-wreaths from the hearth curl up the wide chimney.
    Their names were Stephen and Joseph Montgolfier, they were papermakers by
    trade, and were noted as possessing thoughtful minds and a deep interest in
    all scientific knowledge and new discovery.
  
  
    Before that night—a memorable night, as it was to prove—hundreds of millions
    of people had watched the rising smoke-wreaths of their fires without
    drawing any special inspiration from the fact.

body {
  font: 1.2em sans-serif;
}

p {
  border: 2px solid green;
}
span {
  background-color: lightblue;
}