CSS
Flotadores

Sintaxis

• claro: ninguno | izquierda | derecha | ambos | inline-start | inline-end;
• flotar: izquierda | derecha | ninguno | inline-start | inline-end;

Observaciones

Flotar una imagen dentro del texto

El uso más básico de un flotador es envolver el texto alrededor de una imagen. El siguiente código producirá dos párrafos y una imagen, y el segundo párrafo fluirá alrededor de la imagen. Observe que siempre está contenido después del elemento flotado que fluye alrededor del elemento flotado.

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

Esta será la salida.

Codepen Link

Diseño simple de dos columnas de ancho fijo

Un diseño simple de dos columnas consta de dos elementos flotantes de ancho fijo. Tenga en cuenta que la barra lateral y el área de contenido no tienen la misma altura en este ejemplo. Esta es una de las partes difíciles con diseños de varias columnas que usan flotadores y requiere soluciones para que varias columnas parezcan de la misma altura.

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

Diseño simple de tres columnas de ancho fijo

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

Disposición perezosa / codiciosa de dos columnas

Este diseño utiliza una columna flotada para crear un diseño de dos columnas sin anchos definidos. En este ejemplo, la barra lateral izquierda es "perezosa", ya que solo ocupa todo el espacio que necesita. Otra forma de decir esto es que la barra lateral izquierda está "encogida". La columna de contenido correcta es "codiciosa", ya que ocupa todo el espacio restante.

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

Violín

claro propiedad

La propiedad clara está directamente relacionada con flotadores. Valores de propiedad:

• ninguno - Predeterminado. Permite elementos flotantes en ambos lados.
• izquierda - No se permiten elementos flotantes en el lado izquierdo
• derecha - No se permiten elementos flotantes en el lado derecho
• ambos - No se permiten elementos flotantes en el lado izquierdo o derecho
• inicial: establece esta propiedad en su valor predeterminado. Lea acerca de la inicial
• heredar: hereda esta propiedad de su elemento principal. Lea acerca de heredar

<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

El hack de clearfix es una forma popular de contener flotadores (N. Gallagher aka @necolas)

No debe confundirse con la propiedad clear , clearfix es un concepto (que también está relacionado con flotantes, por lo tanto, con la posible confusión). Para contener flotantes , debe agregar la clase .cf o .clearfix en el contenedor ( el padre ) y .clearfix esta clase con algunas reglas que se describen a continuación.

3 versiones con efectos ligeramente diferentes (fuentes: un nuevo hack de micro clearfix de N. Gallagher y clearfix recargado por TJ Koblentz):

Clearfix (con el colapso del margen superior de los flotadores contenidos todavía ocurriendo)

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

.cf:after {
    clear: both;
}

Clearfix también evita el colapso del margen superior de los flotadores contenidos

/**
 * 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 soporte de navegadores obsoletos IE6 y 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 mostrando efecto clearfix

Otro recurso: todo lo que sabe sobre clearfix es incorrecto (clearfix y BFC - Contexto de formato de bloque, mientras que hasLayout se relaciona con los navegadores obsoletos IE6 tal vez 7)

DIV en línea usando flotador

El div es un elemento de nivel de bloque, es decir, ocupa todo el ancho de la página y los hermanos se colocan uno debajo del otro independientemente de su ancho.

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

La salida del siguiente código será

Podemos hacerlos en línea agregando una propiedad css float 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 de la propiedad de desbordamiento para eliminar flotadores.

Al establecer el valor de overflow en hidden , auto o scroll a un elemento, se borrarán todos los flotantes dentro de ese elemento.

Nota: usando overflow:scroll siempre mostrará el cuadro de scroll