float - overflow css

Los elementos flotantes dentro de un div, flotan fuera de div. ¿Por qué?

Question

Digamos que tienes un div, di que lo coloreas de verde y dale un ancho definido, cuando pongo cosas dentro de él, en mi caso un img y otro div. La idea es que el contenido del div contenedor hará que el div contenedor se extienda y sea un fondo para el contenido. Pero cuando hago esto, el div que contiene se encoge para ajustarse a los objetos no flotantes, y los objetos flotantes estarán completamente fuera, o medio afuera, medio adentro, y no tendrán ninguna relación con el tamaño del div grande.

¿Por qué es esto? ¿Hay algo que me falta, y cómo puedo obtener elementos flotantes para estirar la altura de un div que contiene?

Answer 1

Razón

El problema es que los elementos flotantes están out-of-flow :

Un elemento se llama fuera de flujo si está flotante, en posición absoluta o es el elemento raíz.

Por lo tanto, no impactan los elementos circundantes como lo haría un elemento in-flow .

Esto se explica en 9.5 Flotadores :

Como un flotador no está en el flujo, las cajas de bloque no posicionadas creadas antes y después de la caja flotante fluyen verticalmente como si el flotador no existiera. Sin embargo, las casillas de línea actuales y posteriores creadas junto al flotador se acortan según sea necesario para dejar espacio para la casilla de margen del flotador.

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '''';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-sibling {
  border: 3px solid green;
}
.block-sibling:after {
  content: ''Block sibling'';
  color: green;
}
.float {
  float: left;
  border: 3px solid red;
  height: 90px;
  width: 150px;
  z-index: 1;
}
.float:after {
  content: ''Float'';
  color: red;
}

<div class="float"></div>
<div class="block-sibling">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.
</div>

Esto también se especifica en 10.6 Cálculo de alturas y márgenes . Para bloques "normales" ,

Solo se tienen en cuenta los niños en el flujo normal (es decir, se ignoran las cajas flotantes y las cajas absolutamente posicionadas [...])

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '''';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-parent {
  border: 3px solid blue;
}
.block-parent:after {
  content: ''Block parent'';
  color: blue;
}
.float {
  float: left;
  border: 3px solid red;
  height: 130px;
  width: 150px;
}
.float:after {
  content: ''Float'';
  color: red;
}

<div class="block-parent">
  <div class="float"></div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
</div>

Solución Hacky: despacho.

Una forma de resolver el problema es obligar a colocar algún elemento de flujo debajo de todos los flotadores. Luego, la altura del padre aumentará para envolver ese elemento (y, por lo tanto, las flotaciones también).

Esto se puede lograr utilizando la propiedad clear :

Esta propiedad indica qué lados de los cuadros de un elemento pueden no estar adyacentes a un cuadro flotante anterior.

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '''';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-parent {
  border: 3px solid blue;
}
.block-parent:after {
  content: ''Block parent'';
  color: blue;
}
.float {
  float: left;
  border: 3px solid red;
  height: 84px;
  width: 150px;
}
.float:after {
  content: ''Float'';
  color: red;
}
.clear {
  clear: both;
  text-align: center;
  height: 37px;
  border: 3px dashed pink;
}
.clear:after {
  position: static;
  content: ''Block sibling with clearance'';
  color: pink;
}

<div class="block-parent">
  <div class="float"></div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra.
  <div class="clear"></div>
</div>

Así que una solución es agregar un elemento vacío con clear: both como el último hermano de los flotadores

<div style="clear: both"></div>

Sin embargo, eso no es semántico. Así que mejor genera un pseudo-element al final del padre:

.clearfix::after {
  clear: both;
  display: block;
}

Existen múltiples variantes de este enfoque, por ejemplo, usar la sintaxis de un solo colon en desuso :after de admitir navegadores antiguos, o usar otras pantallas de block-level como display: table .

Solución: raíces de BFC

Hay una excepción al comportamiento problemático definido al principio: si un elemento de bloque establece un Contexto de Formato de Bloque (es una raíz BFC), también envolverá su contenido flotante.

De acuerdo con 10.6.7 alturas ''Auto'' para raíces de contexto de formato de bloque ,

Si el elemento tiene descendientes flotantes cuyo borde inferior está por debajo del borde inferior del contenido del elemento, la altura aumenta para incluir esos bordes.

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '''';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-parent {
  border: 3px solid blue;
}
.block-parent.bfc-root:after {
  content: ''BFC parent'';
  color: blue;
}
.float {
  float: left;
  border: 3px solid red;
  height: 127px;
  width: 150px;
}
.float:after {
  content: ''Float'';
  color: red;
}
.bfc-root {
  overflow: hidden;
}

<div class="block-parent bfc-root">
  <div class="float"></div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
</div>

Además, como se explica en 9.5 Flotadores , las raíces de BFC también son útiles debido a lo siguiente:

El cuadro de borde de una tabla, un elemento reemplazado a nivel de bloque o un elemento en el flujo normal que establece un nuevo contexto de formato de bloque [...] no debe superponerse con el cuadro de margen de ninguna flotación en el mismo contexto de formato de bloque que el elemento en sí. .

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '''';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-sibling {
  border: 3px solid green;
}
.block-sibling.bfc-root:after {
  content: ''BFC sibling'';
  color: green;
}
.float {
  float: left;
  border: 3px solid red;
  height: 90px;
  width: 150px;
  z-index: 1;
}
.float:after {
  content: ''Float'';
  color: red;
}
.bfc-root {
  overflow: hidden;
}

<div class="float"></div>
<div class="block-sibling bfc-root">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
</div>

Se establece un contexto de formato de bloque por

• Bloquee las cajas con un overflow no sea visible , p.

  .bfc-root {
    overflow: hidden;
    /* display: block; */
  }

• Contenedores de bloques que no son cuadros de bloques: cuando la display se establece inline-block en inline-block , table-cell table-caption o table-caption .

  .bfc-root {
    display: inline-block;
  }

• Elementos flotantes: cuando el float se establece a la left o right .

  .bfc-root {
    float: left;
  }

• Elementos de posición absoluta: cuando la position se establece en absolute o fixed .

  .bfc-root {
    position: absolute;
  }

Tenga en cuenta que pueden tener efectos colaterales no deseados, como recortar contenido desbordado, calcular anchos automáticos con el algoritmo de shrink-to-fit o volverse fuera de flujo. Entonces, el problema es que no es posible tener un elemento de nivel de bloque en flujo con desbordamiento visible que establezca un BFC.

La pantalla L3 aborda estos problemas:

Creó los tipos de visualización interna de flow-root para expresar mejor los tipos de visualización de diseño de flujo y para crear un interruptor explícito para convertir un elemento en una raíz BFC . (Esto debería eliminar la necesidad de hacks como ::after { clear: both; } y overflow: hidden [...])

Lamentablemente, no hay soporte para el navegador todavía. Eventualmente podremos usar

.bfc-root {
  display: flow-root;
}

Answer 2

Aquí hay un enfoque más moderno:

.parent {display: flow-root;} 

No más arreglos claros.

ps usando desbordamiento: oculto; oculta la caja de sombra así que ...

Answer 3

Coloca tus div(s) flotantes en un div y en CSS dale el overflow:hidden;
funcionará bien

Answer 4

Como dice Lucas, lo que estás describiendo es el comportamiento previsto para la propiedad float. Lo que confunde a mucha gente es que el flotador ha sido empujado más allá de su uso original para compensar las deficiencias en el modelo de diseño CSS.

Eche un vistazo a Floatutorial si desea obtener una mejor comprensión de cómo funciona esta propiedad.

Answer 5

En algunos casos, es decir, cuando (si) solo está utilizando float para que los elementos fluyan en la misma "línea", puede usar

display: inline-block;

en lugar de

float: left;

De lo contrario, usar un elemento clear al final funciona, incluso si puede ir en contra del grano para necesitar un elemento para hacer lo que debería ser un trabajo CSS.

Answer 6

Gracias, LSerni, lo resolviste por mí.

Lograr esto :

+-----------------------------------------+
| +-------+                     +-------+ |
| | Text1 |                     | Text1 | |
| +-------+                     +-------+ |
|+----------------------------------------+

Tienes que hacer esto :

<div style="overflow:auto">
    <div style="display:inline-block;float:left"> Text1 </div>
    <div style="display:inline-block;float:right"> Text2 </div>
</div>

Answer 7

No hay nada que falte. Float se diseñó para el caso en el que desea que una imagen (por ejemplo) se coloque al lado de varios párrafos de texto, por lo que el texto fluye alrededor de la imagen. Eso no sucedería si el texto "estirara" el contenedor. Su primer párrafo terminaría, y luego su próximo párrafo comenzaría debajo de la imagen (posiblemente varios cientos de píxeles a continuación).

Y es por eso que estás obteniendo el resultado que eres.

Answer 8

Recomendación de W3Schools:

poner overflow: auto en el elemento padre y "coloreará" todo el fondo, incluidos los márgenes de los elementos. También se mantendrán elementos flotantes dentro del borde.

http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clearfix

Answer 9

Lo más fácil es colocar overflow:hidden en el div padre y no especificar una altura:

#parent { overflow: hidden }

Otra forma es también hacer flotar el div padre:

#parent { float: left; width: 100% }

Otra forma utiliza un elemento claro:

<div class="parent">
   <img class="floated_child" src="..." />
   <span class="clear"></span>
</div>

CSS

span.clear { clear: left; display: block; }