Mit der CSS float-Eigenschaft ein Layout in HTML erstellen

Zunächst bauen wir eine kleine HTML-Seite, in der wir mit CSS-Float die Container <nav> und <main> nebeneinander mit der CSS-float Eigenschaft platziert werden. Anschliessend wird beschrieben wie Sie die float-Eigenschaft wieder abgeschalten. Ausserdem wir hier erklärt wie das Boxmodell box-sizing: border-box; / content-box ; arbeitet.

Das HTML-Grundgerüst

<!DOCTYPE html>

<head>

</head>

<body>

<h3 style="color: orange; text-align=center">CSS Layout Float</h3>

<h3>Das ist der Header</h3>

</header>

<aside>

HTML<br>

CSS<br>

</aside>

<main>

<h3>Hier steht der Inhalt</h3>

</main>

</footer>

</body>

</html>

Mit CSS-Float die Container ausrichten

<style>

* {

box-sizing: border-box;

}

header {

background-color: black;

padding: 10px;

text-align: center;

color: white;

}

aside {

float: left;

width: 30%;

height: 300px;

background: dodgerblue;

padding: 20px;

}

main {

float: left;

width: 70%;

background-color: grey;

color: black;

height: 300px;

padding: 20px;

}

footer {

clear: both;

background-color: black;

padding: 10px;

text-align: center;

color: white;

}

</style>

Aufbau eines Layout mit CSS-float

Nun kommen wir zum float Befehl. Wenn wir diesen Befehl den Containern zuweisen, werden sie sich solange nebeneinander in einem Absatz positionieren, wie der Absatz breit ist (in unserem Fall 100%). Wir fügen in unserem CSS-Code also den float Befehl den Containern zu :

Float: none; ist Standard

Mit der CSS-Eigenschaft float (»float« zu Deutsch »schweben«) weisen wir ein Element an, sich an den linken oder an den rechten Rand seines Elternelements zu schieben. Das hat nicht nur Auswirkungen auf das Element selbst, sondern vor allem auf andere Elemente, die mit dem »gefloateten« Element in Verbindung stehen. In Zusammenhang mit float stehen uns drei Werte zur Verfügung: left, right und none. float: none; Wenn ihr es nicht selbst im CSS-Code geschrieben habt, »floaten« Elemente nicht. float: none ist daher der Standardwert.

float: left;

Wenn ein Element float:left erhält positioniert es sich an der linken Seite seines Elternelements. Darauffolgende Elemente ordnen sich dann, sofern genügend Platz vorhanden ist, rechts davon an. Andernfalls rutschen sie eine Zeile unter das gefloatete Element.

float: right;

Wenn ein Element float: right; erhält, orientiert es sich rechts an seinem Elternelement. Darauffolgende Elemente ordnen sich nur links davon an, sofern sie ebenfalls die Eigenschaft float: right besitzen.

CSS-Floats beenden mit clear

Die Eigenschaft »clear« (zu Deutsch: »abschalten«) beendet Floats. Erhält ein Element diese Eigenschaft, so schaltet es den Float vorangehender Elemente ab. Folgende Optionen stehen euch zur Verfügung:

clear: both

Floats beider Richtungen werden beendet. Normalerweise reicht das aus, um das gewünschte Ergebnis zu erzielen.

clear: left

beendet nur float: left

clear: right

beendet nur float: right

box-sizing

Die box-sizing CSS-Eigenschaft wird verwendet, um das Standard CSS Boxmodell zu verändern. Das Boxmodell wird dazu verwendet, Breiten und Höhen von Elementen zu berechnen.

* {

box-sizing: border-box;

}

aside {

float: left;

width: 230px;

height: 300px;

background: dodgerblue;

padding: 20px;

}

border-box

Die Werte width und height enthalten padding und border, aber nicht margin.

content-box

Dies ist der Standard-Stil, der vom CSS Standard definiert wurde. Die Werte width und height berechnen sich nur aus dem Inhalt des Elementes und enthalten weder border, margin oder padding. Box-Modell content-box;

CSS Layout Float

<header>Das ist der Header</header>

<main>float left="70%"Hier steht der Inhalt</main>

Bilder neben einen Text floaten

Normalerweise fliesst ein Text reckteckig um ein gefloatetes Element. In den folgenden Beispielen sehen jeweils ein links und rechts umfliessender Text um ein Bild.

<!DOCTYPE html>

<html>

<head>

<style>

.floatRechts {

float: right;

}

</style>

</head>

<body>

<p style="text-align:center">CSS-Float</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus

et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat

massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae,

justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend

tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>

</body>

</html>

CSS-Float

Logo12 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,

<!DOCTYPE html>

<html>

<head>

<style>

.floatLinks {

float: left;

}

</style>

</head>

<body>

<p style="text-align:center">CSS-Float</p>

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab

illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur

aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem

ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam

quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex</p>

</body>

</html>

CSS-Float

Logo12 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex

Bilder nebeneinander platzieren

CSS-Float kann auch verwendet werden um Bilder nebeneinander zu platzieren: Unten werden 4 Bilder nebeneinander im Container <div class="clearfix"> gefloatet. Mit dem anschliessend .clearfix::after wird in CSS mit content: " "; ein Leerzeichen einfügt und mit clear: both; das vorangehende floaten aufgehoben. Mit display: table; wird die Breite des Tabellen-Elementes nur breit wie der Inhalt.

<!DOCTYPE html>

<html>

<head>

<style>

* {

box-sizing: border-box;

}

.img-container {

float: left;

width: 25%;

padding: 5px;

}

.clearfix::after {

content: " ";

clear: both;

display: table;

}

</style>

</head>

<body>

<h2 style="text-align: center">Bilder nebeneinander mit der float-Eigenschaft</h2>

</div>

</div>

</div>

</div>

</body>

</html>

Bilder nebeneinander mit der CSS-float

Webseiten Layout

Es ist auch üblich ganze Webseiten-Layouts mit der Float-Eigenschaft zu erstellen. Wie Sie HTML-Elemente floaten, den Float für vorangehender Elemente abschalten und das Boxmodell haben Sie jetzt kennengelernt. Was padding und margin ist sehen Sie unter CSS-Einführung. Schauen Sie sich den Code unten einmal an.

<!DOCTYPE html>

<html>

<head>

<style>

* {

box-sizing: border-box;

}

.headerExample, .footerExample {

background-color: grey;

color: white;

padding: 15px;

}

.column {

float: left;

padding: 15px;

}

.clearfix::after {

content: " ";

clear: both;

display: table;

}

.menu {

width: 32%;

}

.contentExample {

width: 68%;

}

.menu ul {

list-style-type: none;

margin: 0;

padding: 0;

}

.menu li {

padding: 8px;

margin-bottom: 8px;

background-color: dodgerblue;

color: black;

font-size: 80%;

}

.menu li:hover {

background-color: #0099cc;

}

</style>

</head>

<body>

<h3>header</h3>

</div>

<ul>

<li>Javascript</li>

</ul>

</div>

<h3>Geschichte des Webdesigns</h3>

<p>Webdesign ist, dem Medium entsprechend, eine relativ junge Disziplin.

Als Kombination aus klassischem Grafikdesign und anderen Bereichen wie dem Interaction Design

oder dem Motion-Design prägt es heute das Erscheinungsbild des Internets.</p>

</div>

<p>Footer</p>

</div>

</body>

</html>

header

Geschichte des Webdesigns

Webdesign ist, dem Medium entsprechend, eine relativ junge Disziplin. Als Kombination aus klassischem Grafikdesign und anderen Bereichen wie dem Interaction Design oder dem Motion-Design prägt es heute das Erscheinungsbild des Internets.

Footer