---
title: Layout mode
slug: Web/CSS/Layout_mode
tags:
  - CSS
translation_of: Web/CSS/Layout_mode
---
<p>Ein <a href="/de/docs/Web/CSS">CSS</a> <strong>Layoutmodus</strong>, manchmal als <em>Layout</em> abgekürzt, ist ein Algorithmus, der die Position und die Größe von Boxen bestimmt, basierend auf der Weise, wie diese mit ihren Geschwisterknoten und übergeordneten Knoten interagieren. Es gibt mehrere davon:</p>

<ul>
 <li>Das <em>Blocklayout</em>, designt, um Dokumente darzustellen. Das Blocklayout beinhaltet dokumentenspezifische Features, wie die Möglichkeit, Elemente <a href="/en-US/docs/Web/CSS/float"><em>umzubrechen</em></a> oder sie in <a href="/de/docs/CSS3_Columns"><em>mehreren Spalten</em></a> darzustellen.</li>
 <li>Das <em>Inlinelayout</em>, designt, um Text darzustellen.</li>
 <li>Das <em>Tabellenlayout</em>, designt, um Tabellen darzustellen.</li>
 <li>Das <em>positionierte Layout</em>, designt, um Elemente ohne viel Interaktion mit anderen Elementen zu positionieren.</li>
 <li>Das <a href="/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes"><em>Flexboxlayout</em></a>, designt, um komplexe Seiten darzustellen, die problemlos in der Größe geändert werden können. {{experimental_inline}}</li>
 <li>Das <em>Rasterlayout</em>, designt, um Elemente relativ zu einem festen Raster darzustellen. {{experimental_inline}}</li>
</ul>

<div class="note">
<p><strong>Hinweis:</strong> Nicht alle <a href="/de/docs/Web/CSS/Referenz">CSS Eigenschaften</a> gelten für alle <em>Layoutmodi</em>. Die meisten von ihnen gelten für einen oder zwei davon und haben keinen Effekt, falls sie für ein Element gesetzt werden, das in einem anderen Layoutmodus dargestellt wird.</p>
</div>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>{{CSS_key_concepts}}</li>
</ul>