CSS
Schwimmt

Syntax

• klar: keine | links | richtig | beide | Inline-Start | Inline-Ende;
• Schwimmer: links | richtig | Keine | Inline-Start | Inline-Ende;

Bemerkungen

Float ein Bild im Text

Die einfachste Verwendung eines Floats besteht darin, dass Text um ein Bild gelegt wird. Der folgende Code erzeugt zwei Absätze und ein Bild, wobei der zweite Absatz um das Bild fließt. Beachten Sie, dass es immer nach dem floated-Element, das um das floated-Element fließt, Inhalt ist.

HTML:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>

<img src="http://lorempixel.com/200/100/" />

<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>

CSS:

img {
  float:left;
  margin-right:1rem;
}

Dies wird die Ausgabe sein

Codepen Link

Einfaches Layout mit zwei Spalten mit fester Breite

Ein einfaches zweispaltiges Layout besteht aus zwei Floating-Elementen mit fester Breite. Beachten Sie, dass die Seitenleiste und der Inhaltsbereich in diesem Beispiel nicht dieselbe Höhe haben. Dies ist einer der schwierigsten Teile mit mehrspaltigen Layouts, die Floats verwenden, und erfordert Umgehungen, damit mehrere Spalten dieselbe Höhe haben.

HTML:

<div class="wrapper">

<div class="sidebar">
  <h2>Sidebar</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</p>
</div>

<div class="content">
  <h1>Content</h1>

  <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
</div>

</div>

CSS:

.wrapper {
  width:600px;
  padding:20px;
  background-color:pink;

  /* Floated elements don't use any height. Adding "overflow:hidden;" forces the
     parent element to expand to contain its floated children. */
  overflow:hidden;
}

.sidebar {
  width:150px;
  float:left;
  background-color:blue;
}

.content {
  width:450px;
  float:right;
  background-color:yellow;
}

Einfaches Layout mit drei Spalten mit fester Breite

HTML:

<div class="wrapper">
  <div class="left-sidebar">
    <h1>Left Sidebar</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
  </div>
  <div class="content">
    <h1>Content</h1>
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. </p>
  </div>
  <div class="right-sidebar">
    <h1>Right Sidebar</h1>
    <p>Fusce ac turpis quis ligula lacinia aliquet.</p>
  </div>
</div>

CSS:

.wrapper {
  width:600px;
  background-color:pink;
  padding:20px;

  /* Floated elements don't use any height. Adding "overflow:hidden;" forces the
     parent element to expand to contain its floated children. */
  overflow:hidden;
}

.left-sidebar {
  width:150px;
  background-color:blue;
  float:left;
}

.content {
  width:300px;
  background-color:yellow;
  float:left;
}

.right-sidebar {
  width:150px;
  background-color:green;
  float:right;
}

Zwei Spalten faul / gierig Layout

Dieses Layout verwendet eine Floated-Spalte, um ein zweispaltiges Layout ohne definierte Breiten zu erstellen. In diesem Beispiel ist die linke Seitenleiste "faul", da sie nur so viel Speicherplatz beansprucht, wie sie benötigt. Eine andere Möglichkeit, dies zu sagen, ist, dass die linke Seitenleiste "eingeschweißt" ist. Die rechte Inhaltsspalte ist "gierig", da sie den gesamten verbleibenden Speicherplatz belegt.

HTML:

<div class="sidebar">
<h1>Sidebar</h1>
<img src="http://lorempixel.com/150/200/" />
</div>

<div class="content">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. </p>
</div>

CSS:

.sidebar {
  /* `display:table;` shrink-wraps the column */
  display:table;
  float:left;
  background-color:blue;
}

.content {
  /* `overflow:hidden;` prevents `.content` from flowing under `.sidebar` */
  overflow:hidden;
  background-color:yellow;
}

Geige

klares Eigentum

Die klare Eigenschaft steht in direktem Zusammenhang mit Floats. Eigenschaftswerte:

• none - Standard Erlaubt schwebende Elemente auf beiden Seiten
• left - Auf der linken Seite sind keine schwebenden Elemente erlaubt
• right - Auf der rechten Seite sind keine schwebenden Elemente erlaubt
• beide - Keine schwebenden Elemente auf der linken oder rechten Seite zulässig
• initial - Setzt diese Eigenschaft auf ihren Standardwert. Lesen Sie über den Anfang
• erben - Übernimmt diese Eigenschaft von ihrem übergeordneten Element. Lesen Sie mehr über das Erben

<html>
<head>
<style>
img {
    float: left;
}

p.clear {
    clear: both;
}
</style>
</head>
<body>

<img src="https://static.pexels.com/photos/69372/pexels-photo-69372-medium.jpeg" width="100">
<p>Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum </p>
<p class="clear">Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum </p>

</body>
</html>

Clearfix

Der Clearfix-Hack ist eine beliebte Methode, um Floats einzudämmen (N. Gallagher aka @necolas)

Nicht mit der clear Eigenschaft zu verwechseln, ist clearfix ein Konzept (das sich auch auf Floats bezieht, also die mögliche Verwirrung). Um Floats zu enthalten , müssen Sie dem Container ( dem übergeordneten Container) die Klasse .cf oder .clearfix hinzufügen und diese Klasse mit einigen unten beschriebenen Regeln .clearfix .

3 Versionen mit leicht unterschiedlichen Effekten (Quellen: Ein neuer Micro-Clearfix-Hack von N. Gallagher und Clearfix, die von TJ Koblentz neu geladen wurden):

Clearfix (wobei der obere Rand der eingeschlossenen Schwimmer weiterhin zusammenbricht)

.cf:after {
    content: "";
    display: table;
}

.cf:after {
    clear: both;
}

Clearfix verhindert auch das Zusammenfallen der oberen Randbereiche

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

Clearfix mit Unterstützung der veralteten Browser IE6 und IE7

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

Codepen mit Clearfix-Effekt

Andere Ressource: Alles, was Sie über clearfix wissen, ist falsch (clearfix und BFC - Block Formatting Context, während sich hasLayout auf veraltete Browser bezieht, IE6 möglicherweise 7).

Inline-DIV mit Float

Das div ist ein Block-Level-Element, dh es nimmt die gesamte Seitenbreite ein und die Geschwister liegen unabhängig von ihrer Breite untereinander.

<div>
    <p>This is DIV 1</p>
</div>
<div>
    <p>This is DIV 2</p>
</div>

Die Ausgabe des folgenden Codes wird sein

Wir können sie inline machen, indem wir dem div eine float css -Eigenschaft hinzufügen.

HTML:

<div class="outer-div">
    <div class="inner-div1">
        <p>This is DIV 1</p>
    </div>
    <div class="inner-div2">
        <p>This is DIV 2</p>
    </div>
</div>

CSS

.inner-div1 {
    width: 50%;
    margin-right:0px;
    float:left;
    background : #337ab7;
    padding:50px 0px;
}
 
.inner-div2 {
    width: 50%;
    margin-right:0px;
    float:left;
    background : #dd2c00;
    padding:50px 0px;
}
 
p {
    text-align:center;
}

Codepen Link

Verwendung der Überlaufeigenschaft zum Löschen von Schwimmern

Wenn Sie den overflow auf " hidden , " auto oder " scroll zu einem Element setzen, werden alle Floats innerhalb dieses Elements gelöscht.

Hinweis: overflow:scroll Scrollen zeigt immer die Scrollbox an