CSS
Des flotteurs

Syntaxe

• clear: none | à gauche | droit | les deux inline-start | fin en ligne;
• float: gauche | droit | aucun inline-start | fin en ligne;

Remarques

Flotter une image dans un texte

L'utilisation la plus élémentaire d'un flotteur consiste à placer un texte autour d'une image. Le code ci-dessous produira deux paragraphes et une image, le second paragraphe circulant autour de l'image. Notez qu'il est toujours contenu après l'élément flottant qui circule autour de l'élément flottant.

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;
}

Ce sera la sortie

Codepen Link

Mise en page simple de deux colonnes à largeur fixe

Une disposition simple à deux colonnes se compose de deux éléments flottants à largeur fixe. Notez que la barre latérale et la zone de contenu ne sont pas de la même hauteur dans cet exemple. Il s’agit de l’une des parties délicates des mises en page à plusieurs colonnes utilisant des flottants, et nécessite des solutions pour que plusieurs colonnes aient la même hauteur.

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;
}

Trois colonnes simples à largeur fixe

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;
}

Mise en page paresseuse / gourmande à deux colonnes

Cette disposition utilise une colonne flottante pour créer une disposition à deux colonnes sans largeur définie. Dans cet exemple, la barre latérale gauche est "paresseuse", en ce sens qu'elle ne prend que l'espace nécessaire. Une autre façon de dire ceci est que la barre latérale gauche est "emballée sous film rétractable". La bonne colonne de contenu est "gourmande", car elle occupe tout l’espace restant.

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;
}

Violon

propriété claire

La propriété clear est directement liée aux flottants. Valeurs de propriété:

• none - Par défaut Permet des éléments flottants des deux côtés
• à gauche - Aucun élément flottant autorisé à gauche
• right - Aucun élément flottant autorisé à droite
• les deux - Aucun élément flottant n'est autorisé du côté gauche ou du côté droit
• initial - Définit cette propriété sur sa valeur par défaut. Lisez à propos de l'initiale
• inherit - Hérite cette propriété de son élément parent. En savoir plus sur hériter

<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

Le hack clearfix est un moyen populaire de contenir des flottants (N. Gallagher aka @necolas)

Ne pas confondre avec la propriété clear , clearfix est un concept (qui est également lié aux flottants, donc à la confusion possible). Pour contenir des flottants , vous devez ajouter la classe .cf ou .clearfix au conteneur ( le parent ) et mettre en forme cette classe avec quelques règles décrites ci-dessous.

3 versions avec des effets légèrement différents (sources: un nouveau hack micro clearfix de N. Gallagher et clearfix rechargé par TJ Koblentz):

Clearfix (avec la marge supérieure effondrant les flotteurs contenus)

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

.cf:after {
    clear: both;
}

Clearfix empêche également l'effondrement de la marge supérieure des flotteurs contenus

/**
 * 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 avec le support des navigateurs périmés IE6 et 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 montrant un effet de clearfix

Autre ressource: tout ce que vous savez sur clearfix est incorrect (clearfix et BFC - Context de formatage de bloc alors que hasLayout concerne les navigateurs périmés IE6 7)

DIV en ligne utilisant un flottant

Le div est un élément de niveau bloc, c’est-à-dire qu’il occupe toute la largeur de la page et que les frères et soeurs sont placés les uns en dessous des autres, quelle que soit leur largeur.

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

La sortie du code suivant sera

Nous pouvons les rendre en ligne en ajoutant une propriété css float à la div .

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

Utilisation de la propriété de débordement pour effacer les flottants

Définir la valeur de overflow sur hidden , auto ou scroll jusqu'à un élément effacera tous les flottants de cet élément.

Note: en utilisant overflow:scroll affichera toujours la scrollbox