210

Me gustaría preguntar cómo funcionan la altura y el flotador. Tengo un div externo y un div interno que tiene contenido. Su altura puede variar según el contenido del div interno, pero parece que mi div interno desbordará su div externo. ¿Cuál sería la forma correcta de hacerlo?

 <html>
    <body>
        <div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange">
    	    <div style="width:500px; height:200px; background-color:black; float:right"></div>
        </div>
    </body>
</html>

html css css-float Niño pasmo
fuente

posible duplicado de CSS: min-height no funciona o CSS: problema de altura Div en conjunto flotante

Shauna

bonito y muy bueno gracias!

Bassam Alugili

posible duplicado de cosas flotantes dentro de un div, flota fuera de div. ¿Por qué?

Oriol

581

Los elementos flotantes no se suman a la altura del elemento contenedor y, por lo tanto, si no los borra, la altura del contenedor no aumentará ...

Te mostraré visualmente:

ingrese la descripción de la imagen aquí

Más explicaciones:

<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 puede agregar overflow: hidden;elementos de contenedor, pero sugeriría que use clear: both;en su lugar.

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

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

¿Cómo funciona CSS Float?

¿Qué es exactamente flotador y qué hace?

La floatpropiedad es mal entendida por la mayoría de los principiantes. Bueno, ¿qué hace exactamente float? Inicialmente, la floatpropiedad se introdujo para fluir texto alrededor de imágenes, que son flotantes lefto right. Aquí hay otra explicación de @Madara Uchicha.
Entonces, ¿está mal usar la floatpropiedad para colocar cajas una al lado de la otra? La respuesta es no ; no hay problema si usa la floatpropiedad para establecer cajas una al lado de la otra.
Flotar un elemento inlineo un blocknivel hará que el elemento se comporte como un inline-blockelemento.
Manifestación
Si flota un elemento lefto right, el widthelemento se limitará al contenido que contiene, a menos que widthse defina explícitamente ...
No puedes floatun elemento center. Este es el mayor problema que siempre he visto con los principiantes, el uso ~~float: center;~~, que no es un valor válido para la floatpropiedad. floatgeneralmente se usa para float/ mover contenido a la izquierda o a la derecha . Solo hay cuatro valores válidos para la floatpropiedad left, es decir right, none(predeterminado) y inherit.
El elemento primario se colapsa, cuando contiene elementos secundarios flotantes, para evitar esto, utilizamos la clear: both;propiedad, para borrar los elementos flotantes en ambos lados, lo que evitará el colapso del elemento primario. Para obtener más información, puede consultar mi otra respuesta aquí .
(Importante) Piense en ello donde 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 en el flujo de documentos normal se ocultarán detrás de los elementos flotantes porque está en el nivel de la pila por encima de los elementos flotantes normales. (Por favor, no relacione esto z-indexya que es completamente diferente).

Tomando un caso como ejemplo para explicar cómo funcionan los flotadores CSS, suponiendo que necesitamos un diseño simple de 2 columnas con un encabezado, pie de página y 2 columnas, así que aquí está el aspecto del plano ...

ingrese la descripción de la imagen aquí

En el ejemplo anterior, vamos a estar flotando sólo las cajas de color rojo, ya sea que pueda floattanto a la left, o puede hacer floata left, y otro para right, así, depende de la disposición, si se trata de 3 columnas, es posible que float2 columnas a leftdonde otro uno de ellos rightdepende, aunque en este ejemplo, tenemos un diseño simplificado de 2 columnas, por lo que floatuno lo hará lefty el otro lo hará 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 suponer que es su ventana gráfica, luego usamos headery asignamos una heightde 50pxmanera que no hay nada lujoso allí. Es solo un elemento normal de nivel de bloque no flotante que ocupará 100%espacio horizontal a menos que sea flotante o le asignemos inline-block.

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

Columna flotando a la izquierda

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

Al llegar a la segunda columna, deja que floatesta sea laright

Otra columna flotaba a la derecha.

Aquí, tenemos una 300pxcolumna ancha que floatla rightque va a sentarse al lado de la primera columna, ya que está flotando en el left, y ya que está flotando a la left, creó canal vacío a la right, y como no había suficiente espacio en la rightnuestra rightelemento flotante se sentó perfectamente al lado del leftuno.

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

Agregue un elemento de nivel de bloque vacío y úselo clear: both;antes de que termine el elemento padre, que contiene elementos flotantes, ahora esta es una solución económica para clearsus elementos flotantes que hará el trabajo por usted, pero recomendaría no usar esto.

Agregue, <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 un padre colapsado, pero agrega un marcado innecesario 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 se puede ver la sombra en los 4 lados,overflow: hidden;causa este problema)

¿Y ahora qué? Guarde un elemento, no, overflow: hidden;así que busque un hack de solución clara, use el fragmento a continuación en su CSS, y al igual que lo hace overflow: hidden;para el elemento primario, llame al classsiguiente en el elemento primario para auto-borrar.

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

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

Manifestación

Aquí, shadow funciona según lo previsto, también, borra automáticamente el elemento padre que evita el colapso.

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

Manifestación

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

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

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 columna.
Uso imgflotante en el interior pque permitirá que nuestro contenido fluya.

Demo (sin flotarimg)

Demo 2 (imgflotando a laleft)

Uso floatpara crear menú horizontal - Demo

Flota el segundo elemento también, o usa `margin`

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

Supongamos que si eliminamos float: right;de nuestro .floated_right class, el divse representará desde el extremo leftya que no está flotando.

Manifestación

Así pues, en este caso, ya sea que pueda floatel que el leftasí

O

Puede usar margin-leftcuál será igual al tamaño de la columna flotante izquierda, es decir, 200pxancho .

Señor extranjero
fuente

3

El hecho de que los flotadores no contribuyen a la altura de un padre a nivel de bloque se indica explícitamente aquí en la especificación: w3.org/TR/CSS21/visudet.html#normal-block La razón por la que funciona un clearfix es porque 1) el clearfix está (generalmente) en el flujo normal 2) limpiar los flotadores requiere que el clearfix se coloque en el fondo de los flotadores 3) el contenedor debe estirarse para contener ese clearfix.

BoltClock

@BoltClock sería mejor si revierte la edición del título, ya que afectará severamente el SEO para los usuarios que encuentran cómo funciona el flotador ... puede escribir esos términos en Google y verificar ... de lo contrario, esta respuesta canónica no sirve de nada si las personas son no puede encontrar lo que están buscando.

Sr. Alien

"¿Cómo funciona CSS float?" es un título extremadamente amplio, y también engaña a las personas a votar para cerrar cualquier pregunta flotante como un engaño de esta. La pregunta aquí solo cubre un aspecto: contenedores que envuelven (o no envuelven) flotadores.

BoltClock

@BoltClock De todos modos, el tecnicismo sigue siendo el mismo que el explicado clear: both;, pero está bien si sientes que la edición justifica, así que sigamos así

Sr. Alien

1

respuesta brillante "Flotando cualquier elemento hacia la izquierda o hacia la derecha, el ancho del elemento se limitará al contenido que contiene, a menos que el ancho se defina explícitamente". Observé lo mismo y solo estaba buscando que esto se confirmara. Gracias

Deen John

38

Debe agregar overflow:autoa su div principal para que abarque el div flotante interno:

<div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange;overflow:auto">
    <div style="width:500px; height:200px; background-color:black; float:right">
    </div>
</div>

Ejemplo de jsFiddle

j08691
fuente

66

Esto no es una solución, está ocultando el contenido que sale de los límites del div externo.

Alejandro Ruiz Arias

@AlejandroRuizArias - Exactamente, ¿cómo se oculta algo?

j08691

3

En este ejemplo nada, pero si introduce suficiente contenido en el div interno sí.

Alejandro Ruiz Arias

Esto no hace lo que el OP estaba buscando: Forks jsfiddle.net/h0ceb5ra

TecBrat

1

Increíble. La solución de un atributo que estaba buscando, si todo lo demás fuera tan fácil, no habría necesidad de contracciones.

YK

10

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

En circunstancias normales, suponiendo que no se haya 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 de la división principal se extenderá más allá del último elemento. Desafortunadamente, un elemento flotante evita que el padre tome en cuenta el elemento flotante al determinar su altura. Esto significa que si su último elemento es flotante, no "estirará" al padre de la misma manera que lo haría un elemento normal.

Claro

Hay dos formas comunes de solucionar esto. El primero es agregar un elemento "claro"; es decir, otro elemento debajo del flotante que obligará al padre a estirarse. Entonces agregue el siguiente html como último hijo:

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

No debe ser visible, y al usar clear: ambos, se asegura de que no se ubicará al lado del elemento flotante, sino después.

Desbordamiento:

El segundo método, que es el preferido por la mayoría de las personas (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 niño flotante. Esto solo es cierto si no ha establecido una altura en el padre, por supuesto.

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

Malorico
fuente

3

Es por el flotador del div. Agregue overflow: hiddenel elemento exterior.

<div style="overflow:hidden; margin:0 auto;width: 960px; min-height: 100px; background-color:orange;">
    <div style="width:500px; height:200px; background-color:black; float:right">
    </div>
</div>

Manifestación

Starx
fuente

3

Confundes cómo los navegadores procesan los elementos cuando hay elementos flotantes. Si un elemento de bloque está flotando (su div interno en su caso), otros elementos de bloque lo ignorarán porque el navegador elimina los elementos flotantes del flujo normal de la página web. Luego, debido a que el div flotante se ha eliminado del flujo normal, el div externo se llena, como si el div interno no estuviera allí. Sin embargo, los elementos en línea (imágenes, enlaces, texto, comillas negras) respetarán los límites del elemento flotante. Si introduce texto en el div externo, el texto se colocará cerca del div interno.

En otras palabras, los elementos de bloque (encabezados, párrafos, divs, etc.) ignoran los elementos flotantes y completan, y los elementos en línea (imágenes, enlaces, texto, etc.) respetan los límites de los elementos flotantes.

Un ejemplo de violín aquí

<body>
    <div style="float:right; background-color:blue;width:200px;min-height:400px;margin-right:20px">
           floating element
    </div>
    <h1 style="background-color:red;"> this is a big header</h1>
    <p style="background-color:green"> this is a parragraph with text and a big image. The text places arrounds the floating element. Because of the image is wider than space between paragrah and floating element places down the floating element. Try to make wider the viewport and see what happens :D
        <img src="http://2.bp.blogspot.com/_nKxzQGcCLtQ/TBYPAJ6xM4I/AAAAAAAAAC8/lG6XemOXosU/s1600/css.png">
     </p>

Alejandro Ruiz Arias
fuente

3

No resalte el texto y comparta enlaces de violín, publique códigos en su respuesta de la próxima vez, porque si el enlace de violín está muerto, el usuario futuro no obtendrá ninguna ayuda aquí y su respuesta no tendrá sentido

Sr. Alien

2

Prueba este

.parent_div{
    display: flex;
}

Yusufbek
fuente

1

puede usar la propiedad de desbordamiento al contenedor div si no tiene ningún div para mostrar sobre el contenedor, por ejemplo:

<div class="cointainer">
    <div class="one">Content One</div>
    <div class="two">Content Two</div>
</div>

Aquí está el siguiente CSS:

.container{
    width:100%;/* As per your requirment */
    height:auto;
    float:left;
    overflow:hidden;
}
.one{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

.two{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

-----------------------O-------------------------- ----

    <div class="cointainer">
        <div class="one">Content One</div>
        <div class="two">Content Two</div>
        <div class="clearfix"></div>
    </div>

Aquí está el siguiente CSS:

    .container{
        width:100%;/* As per your requirment */
        height:auto;
        float:left;
        overflow:hidden;
    }
    .one{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }

    .two{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }
    .clearfix:before,
    .clearfix:after{
        display: table;
        content: " ";
    }
    .clearfix:after{
        clear: both;
    }

Nishant Rana
fuente

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

Respuestas:

¿Cómo funciona CSS Float?

¿Qué es exactamente flotador y qué hace?

Flota el segundo elemento también, o usa `margin`