¿Por qué no aumenta la altura de un elemento contenedor si contiene elementos flotantes?

Solución:

Los elementos flotantes no aumentan la altura del elemento contenedor y, por lo tanto, si no los borra, la altura del contenedor no aumentará …

Te mostraré visualmente:

Más explicación:

También puede agregar overflow: hidden; en elementos de contenedor, pero te sugiero que uses clear: both; en lugar de.

Además, si desea borrar automáticamente un elemento, puede usar

.self_clear:after 
  content: "";
  clear: both;
  display: table;

---

¿Cómo funciona CSS Float?

¿Qué es flotar exactamente y para qué sirve?

• los float la propiedad es mal entendida por la mayoría de los principiantes. Bueno, que hace exactamente float ¿hacer? Inicialmente, el float se introdujo la propiedad para hacer fluir el texto alrededor de las imágenes, que son flotantes left o right. Aquí hay otra explicación de @Madara Uchicha.

  Entonces, ¿está mal usar el float propiedad para colocar cajas una al lado de la otra? La respuesta es no; no hay problema si usa el float propiedad para colocar cajas una al lado de la otra.

• Flotando un inline o block El elemento de nivel hará que el elemento se comporte como un inline-block elemento.

  Manifestación

• Si flotas un elemento left o right, los width del elemento se limitará al contenido que contiene, a menos que width se define explícitamente …

• No se puede float un elemento center. Este es el mayor problema que siempre he visto con los principiantes, al usar float: center;, que no es un valor válido para el float propiedad. float se usa generalmente para float/ mover contenido al mismo izquierda o al mismísimo Derecha. Solo hay cuatro valores válidos para float propiedad es decir left, right, none (predeterminado) y inherit.

• El elemento principal se colapsa, cuando contiene elementos secundarios flotantes, para evitar esto, usamos clear: both; propiedad, para borrar los elementos flotantes en ambos lados, lo que evitará el colapso del elemento padre. Para obtener más información, puede consultar mi otra respuesta aquí.

• (Importante) Piense en ello cuando tenemos una pila de varios elementos. Cuando usamos float: left; o float: right; el elemento se mueve por encima de la pila en uno. Por lo tanto, los elementos del flujo de documentos normal se ocultarán detrás de los elementos flotantes porque están en el nivel de pila por encima de los elementos flotantes normales. (Por favor, no relacione esto con z-index ya que eso es completamente diferente.)

---

Tomando un caso como ejemplo para explicar cómo funcionan los flotadores de CSS, asumiendo que necesitamos un diseño simple de 2 columnas con un encabezado, pie de página y 2 columnas, así es como se ve el plano …

En el ejemplo anterior, solo flotaremos los cuadros rojos, o puede float ambos al left, o tu puedes float sobre left, y otro a right también, depende del diseño, si son 3 columnas, puede float 2 columnas para left donde otro al right depende, aunque en este ejemplo, tenemos un diseño simplificado de 2 columnas, por lo que float Uno para left y el otro al right.

El marcado y los estilos para crear el diseño se explican más abajo …

    
Header
    

        

            This

            is

            just

            a

            left

            floated

            column

        
        

            This

            is

            just

            a

            right

            floated

            column

        
    
    


* 
    -moz-box-sizing: border-box;       /* Just for demo purpose */
    -webkkit-box-sizing: border-box;   /* Just for demo purpose */
    box-sizing: border-box;            /* Just for demo purpose */
    margin: 0;
    padding: 0;


.main_wrap 
    margin: 20px;
    border: 3px solid black;
    width: 520px;


header, footer 
    height: 50px;
    border: 3px solid silver;
    text-align: center;
    line-height: 50px;


.wrapper 
    border: 3px solid green;


.floated_left 
    float: left;
    width: 200px;
    border: 3px solid red;


.floated_right 
    float: right;
    width: 300px;
    border: 3px solid red;


.clear:after 
    clear: both;
    content: "";
    display: table;

Vayamos paso a paso con el diseño y veamos cómo funciona el flotador.

En primer lugar, usamos el elemento contenedor principal, puede suponer que es su ventana gráfica, luego usamos header y asignar un height de 50px así que no hay nada lujoso. Es solo un elemento normal de nivel de bloque no flotante que ocupará 100% espacio horizontal a menos que esté flotando o le asignemos inline-block lo.

El primer valor válido para float es left así que en nuestro ejemplo usamos float: left; por .floated_left, por lo que tenemos la intención de flotar un bloque al left de nuestro elemento contenedor.

Columna flotando a la izquierda

Y sí, si ve, el elemento padre, que es .wrapper está colapsado, el que ve con un borde verde no se expandió, pero debería, ¿verdad? Volveremos a eso en un tiempo, por ahora, tenemos una columna flotando para left.

Llegando a la segunda columna, déjelo float este para el right

Otra columna flotaba a la derecha

Aquí tenemos un 300px columna ancha que nosotros float al right, que se ubicará junto a la primera columna mientras flota hacia el left, y dado que ha flotado al left, creó una cuneta vacía a la right, y dado que había mucho espacio en el right, nuestro right elemento flotante se sentó perfectamente al lado de la left uno.

Aún así, el elemento padre está colapsado, bueno, arreglemos eso ahora. Hay muchas formas de evitar que el elemento principal se contraiga.

• Agregue un elemento de nivel de bloque vacío y use clear: both; antes de que termine el elemento principal, que contiene elementos flotantes, ahora esta es una solución barata para clear sus elementos flotantes que harán el trabajo por usted, pero recomendaría no usar esto.

Agregar,

antes de .wrapperdiv termina, como

Manifestación

Bueno, eso se soluciona muy bien, ya no hay un padre colapsado, pero agrega un marcado innecesario al DOM, por lo que algunos sugieren, usar overflow: hidden; en el elemento principal que contiene elementos secundarios flotantes que funcionan según lo previsto.

Usar overflow: hidden; sobre .wrapper

.wrapper 
    border: 3px solid green;
    overflow: hidden;

Manifestación

Eso nos ahorra un elemento cada vez que necesitamos clearfloat pero como probé varios casos con esto, falló en uno en particular, que usa box-shadow en los elementos secundarios.

Manifestación (No puedo ver la sombra en los 4 lados, overflow: hidden; causa este problema)

¿Y ahora qué? Guardar un elemento, no overflow: hidden; así que busque un truco de corrección clara, use el siguiente fragmento en su CSS, y tal como lo usa overflow: hidden; para el elemento padre, llame al class a continuación en el elemento principal para auto-borrar.

.clear:after 
    clear: both;
    content: "";
    display: table;



    

Manifestación

Aquí, la sombra funciona según lo previsto, además, se auto limpia el elemento padre, lo que evita que se colapse.

Y por último, usamos el pie de página después de que clear los elementos flotantes.

Manifestación

---

Cuando es float: none; se usa de todos modos, ya que es el predeterminado, por lo que cualquier uso para declarar float: none;?

Bueno, depende, si está optando por un diseño receptivo, usará este valor muchas veces, cuando desee que sus elementos flotantes se representen uno debajo del otro con una resolución determinada. Para eso float: none; la propiedad juega un papel importante allí.

---

Pocos ejemplos del mundo real de cómo float es útil.

• El primer ejemplo que ya vimos es crear uno o más diseños de columna.
• Utilizando img flotó dentro p lo que permitirá que nuestro contenido fluya.

Manifestación (Sin flotar img)

Demo 2 (img flotó hacia el left)

• Utilizando float para crear menú horizontal – Manifestación

---

También flota el segundo elemento o usa `margin`

Por último, pero no menos importante, quiero explicar este caso particular en el que float único elemento a la left pero no float el otro, entonces, ¿qué pasa?

Supongamos que eliminamos float: right; De nuestros .floated_rightclass, los div se renderizará desde el extremo left ya que no está flotando.

Manifestación

Entonces, en este caso, puedes float la a la left así como

O

Puedes usar margin-left que será igual al tamaño de la columna flotante izquierda, es decir 200px amplio.

Necesitas agregar overflow:auto a su div padre para que abarque el div flotante interno:

ejemplo de jsFiddle

Se encuentra con el error de flotación (aunque no estoy seguro de si técnicamente es un error debido a la cantidad de navegadores que presentan este comportamiento). Esto es lo que está pasando:

En circunstancias normales, asumiendo que no se ha establecido una altura explícita, un elemento de nivel de bloque como un div establecerá su altura en función de su contenido. La parte inferior del div padre se extenderá más allá del último elemento. Desafortunadamente, la flotación de un elemento evita que el padre tenga en cuenta el elemento flotante al determinar su altura. Esto significa que si su último elemento está flotando, no “estirará” al padre de la misma manera que lo haría un elemento normal.

Claro

Hay dos formas habituales de solucionar este problema. La primera es agregar un elemento de “compensación”; es decir, otro elemento debajo del flotante que obligará al padre a estirarse. Así que agregue el siguiente html como último hijo:

No debería ser visible, y al usar clear: ambos, te aseguras de que no se sentará al lado del elemento flotante, sino detrás de él.

Desbordamiento:

El segundo método, que es preferido por la mayoría de la gente (creo) es cambiar el CSS del elemento padre para que el desbordamiento sea cualquier cosa menos “visible”. Por lo tanto, establecer el desbordamiento en “oculto” obligará al padre a estirarse más allá de la parte inferior del hijo flotante. Esto es sólo true si no ha establecido una altura para el padre, por supuesto.

Como dije, se prefiere el segundo método, ya que no requiere que agregue elementos semánticamente sin sentido a su marcado, pero hay ocasiones en las que necesita el overflow para ser visible, en cuyo caso agregar un elemento de compensación es más que aceptable.

Si te apasiona la programación, puedes dejar un enunciado acerca de qué te ha parecido este enunciado.

---

---

Utiliza Nuestro Buscador