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

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 lo mostraré visualmente:

Más explicación:

<div>
  <div style="float: left;"></div>
  <div style="width: 15px;"></div> <!-- This will shift 
                                        besides the top div. Why? Because of the top div 
                                        is floated left, making the 
                                        rest of the space blank -->

  <div style="clear: both;"></div> 
  <!-- Now in order to prevent the next div from floating beside the top ones, 
       we use `clear: both;`. This is like a wall, so now none of the div's 
       will be floated after this point. The container height will now also include the 
       height of these floated divs -->
  <div></div>
</div>

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

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

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

¿Cómo funciona CSS flotante?

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

• La mayoría de los principiantes no comprenden bien esta floatpropiedad. Bueno, ¿qué hace exactamente float? Inicialmente, la floatpropiedad se introdujo para hacer fluir texto alrededor de imágenes, que son flotantes lefto right. Aquí hay otra explicación de @Madara Uchicha.

  Entonces, ¿es incorrecto utilizar la floatpropiedad para colocar cajas una al lado de la otra? La respuesta es no ; no hay problema si usa la floatpropiedad para configurar cuadros uno al lado del otro.

• Hacer flotar un elemento de nivel inlineo blockhará que el elemento se comporte como un inline-blockelemento.

  Manifestación

• Si flota un elemento lefto right, el widthvalor del elemento se limitará al contenido que contiene, a menos que widthesté definido explícitamente...

• No puedes floatun 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 la floatpropiedad. floatgeneralmente se usa para floatmover contenido hacia la izquierda o hacia la derecha . Sólo hay cuatro valores válidos para floatla propiedad left, es decir right, none(predeterminado) y inherit.

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

• (Importante) Piénselo donde tenemos una pila de varios elementos. Cuando usamos float: left;o float: right;el elemento se mueve uno por encima de la pila. Por lo tanto, los elementos en el flujo normal de documentos se esconderán detrás de los elementos flotantes porque están en el nivel de la pila por encima de los elementos flotantes normales. (Por favor, no relacione esto ya z-indexque es completamente diferente).

Tomando un caso como ejemplo para explicar cómo funcionan los elementos flotantes CSS, suponiendo 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, flotaremos solo los cuadros rojos, ya sea que pueda floatir a left, o puede floatir a left, y otro righttambién, depende del diseño, si son 3 columnas, puede colocar float2 columnas leftdonde otra uno rightdepende, aunque en este ejemplo tenemos un diseño simplificado de 2 columnas, por lo que floatuno depende lefty el otro depende right.

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

<div class="main_wrap">
    <header>Header</header>
    <div class="wrapper clear">
        <div class="floated_left">
            This<br />
            is<br />
            just<br />
            a<br />
            left<br />
            floated<br />
            column<br />
        </div>
        <div class="floated_right">
            This<br />
            is<br />
            just<br />
            a<br />
            right<br />
            floated<br />
            column<br />
        </div>
    </div>
    <footer>Footer</footer>
</div>

* {
    -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 asumir que es su ventana gráfica, luego usamos headery asignamos un elemento heightde 50pxmodo que no hay nada especial allí. Es solo un elemento normal a nivel de bloque no flotante que ocupará 100%espacio horizontal a menos que esté flotante o se inline-blocklo asignemos.

El primer valor válido para floates leftso, en nuestro ejemplo usamos float: left;for .floated_left, por lo que pretendemos hacer flotar un bloque en leftnuestro elemento contenedor.

La columna flotó hacia la izquierda

Y sí, si ves que el elemento principal, que está .wrappercolapsado, el que ves con un borde verde no se expandió, pero debería hacerlo, ¿verdad? Volveremos a eso en un momento, por ahora, tenemos una columna flotando en left.

Llegando a la segunda columna, dejémosla floata laright

Otra columna flotó hacia la derecha.

Aquí, tenemos una 300pxcolumna ancha a la que vamos float, rightque se ubicará al lado de la primera columna mientras flota hacia left, y como flotó hacia left, creó un canal vacío para right, y como había mucho espacio en right, nuestro rightEl elemento flotante estaba perfectamente al lado del leftotro.

Aún así, el elemento principal está colapsado, bueno, arreglémoslo ahora. Hay muchas formas de evitar que el elemento principal colapse.

• Agregue un elemento de nivel de bloque vacío y utilícelo clear: both;antes de que finalice el elemento principal, que contiene elementos flotantes. Esta es una solución económica para clearsus elementos flotantes que hará el trabajo por usted, pero recomendaría no usarlo.

Agrega, <div style="clear: both;"></div>antes de los .wrapper divextremos, como

<div class="wrapper clear">
    <!-- Floated columns -->
    <div style="clear: both;"></div>
</div>

Manifestación

Bueno, eso se soluciona muy bien, ya no hay padres colapsados, pero agrega marcas innecesarias al DOM, por lo que algunos sugieren usarlo overflow: hidden;en el elemento padre que contiene elementos secundarios flotantes que funcionan según lo previsto.

Usar overflow: hidden;en.wrapper

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

Manifestación

Eso nos ahorra un elemento cada vez que lo necesitamos, clear floatpero como probé varios casos con esto, falló en uno en particular, que se usa box-shadowen los elementos secundarios.

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

¿Y ahora qué? Guarde un elemento, no, overflow: hidden;así que busque una solución clara, use el siguiente fragmento en su CSS y, tal como lo usa overflow: hidden;para el elemento principal, llame a lo classsiguiente en el elemento principal para borrarlo automáticamente.

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

<div class="wrapper clear">
    <!-- Floated Elements -->
</div>

Manifestación

Aquí, la sombra funciona según lo previsto y además borra automáticamente el elemento principal, lo que evita que se colapse.

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

Manifestación

¿Cuándo se float: none;usa de todos modos, ya que es el valor predeterminado, entonces, hay algún uso para declarar float: none;?

Bueno, depende, si buscas un diseño responsivo, usarás este valor muchas veces cuando quieras que tus elementos flotantes se representen uno debajo del otro a una resolución determinada. Porque la float: none;propiedad juega allí un papel importante.

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

• El primer ejemplo que ya vimos es crear uno o más diseños de columnas.
• Usar imgun interior flotante pque permitirá que nuestro contenido fluya.

Demostración (sin flotarimg)

Demostración 2 (imgflotó hacia elleft)

• Uso floatpara crear un menú horizontal - Demostración

Flota el segundo elemento también, o usa "margen"

Por último, pero no menos importante, quiero explicar este caso particular en el que floatsolo se utiliza un elemento para el otro, leftpero no floatel otro, entonces, ¿qué sucede?

Supongamos que si lo eliminamos float: right;de nuestro .floated_right class, se divrepresentará desde el extremo leftya que no flota.

Manifestación

Entonces, en este caso, también puedes floathacerloleft

O

Puede utilizar margin-leftel cual será igual al tamaño de la columna flotante izquierda, es decir, 200pxancho .

May 15 '2013 14:05 Mr. Alien