CSS
Galleggianti

Sintassi

• chiaro: nessuno | sinistra | giusto | entrambi | inline-start | inline-end;
• float: sinistra | giusto | nessuno | inline-start | inline-end;

Osservazioni

Galleggiare un'immagine all'interno del testo

L'uso più basilare di un oggetto mobile è che il testo si avvolge attorno a un'immagine. Il codice seguente produrrà due paragrafi e un'immagine, con il secondo paragrafo che scorre intorno all'immagine. Si noti che è sempre contenuto dopo l'elemento floated che scorre attorno all'elemento floated.

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

Questo sarà l'output

Codepen Link

Semplice layout a due colonne a larghezza fissa

Un semplice layout a due colonne è costituito da due elementi fluttuanti a larghezza fissa. Notare che la barra laterale e l'area del contenuto non hanno la stessa altezza in questo esempio. Questa è una delle parti più complesse con layout a più colonne che utilizzano i float e richiede soluzioni alternative per far apparire più colonne con la stessa altezza.

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

Semplice layout a tre colonne a larghezza fissa

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

Layout pigro / avido a due colonne

Questo layout utilizza una colonna flottata per creare un layout a due colonne senza larghezze definite. In questo esempio la barra laterale sinistra è "pigra", in quanto occupa solo lo spazio necessario. Un altro modo per dire questo è che la barra laterale sinistra è "termoretraibile". La colonna del contenuto giusto è "golosa", in quanto occupa tutto lo spazio rimanente.

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

Violino

chiara proprietà

La proprietà clear è direttamente correlata ai float. Valori di proprietà:

• nessuno - Predefinito. Consente elementi mobili su entrambi i lati
• sinistra - Nessun elemento flottante consentito sul lato sinistro
• a destra: non sono ammessi elementi mobili sul lato destro
• entrambi - Nessun elemento flottante consentito sul lato sinistro o destro
• iniziale: imposta questa proprietà sul valore predefinito. Leggi l'iniziale
• inherit: eredita questa proprietà dall'elemento padre. Leggi sull'eredità

<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

L'hack clearfix è un modo popolare per contenere i float (N. Gallagher aka @necolas)

Da non confondere con la proprietà clear , clearfix è un concetto (che è anche legato ai float, quindi alla possibile confusione). Per contenere i float , devi aggiungere la classe .cf o .clearfix sul contenitore ( il genitore ) e .clearfix uno stile a questa classe con alcune regole descritte di seguito.

3 versioni con effetti leggermente diversi (fonti: un nuovo micro clearfix hack di N. Gallagher e clearfix ricaricato da TJ Koblentz):

Clearfix (con il margine superiore di compressione dei float ancora presenti)

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

.cf:after {
    clear: both;
}

Clearfix impedisce anche il collasso dei margini superiori dei float contenuti

/**
 * 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 con supporto di browser obsoleti IE6 e 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 mostra l'effetto clearfix

Altra risorsa: tutto ciò che sai di clearfix è sbagliato (clearfix e BFC - Block Formatting Context mentre hasLayout si riferisce a browser obsoleti IE6 forse 7)

DIV in linea usando float

Il div è un elemento a livello di blocco, cioè occupa l'intera larghezza della pagina ei fratelli sono posizionati uno sotto l'altro indipendentemente dalla loro larghezza.

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

L'output del seguente codice sarà

Possiamo renderli in linea aggiungendo una proprietà float css al 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

Uso della proprietà di overflow per cancellare i float

Impostando il valore di overflow su hidden , auto o scroll su un elemento, verranno cancellati tutti i float all'interno di quell'elemento.

Nota: utilizzando l' overflow:scroll mostrerà sempre la scrollbox