html - tamaño - hacer que un div ocupe todo el alto

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

Confundes cómo los navegadores representan 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 elementos flotantes del flujo normal de la página web. Entonces, como el div flotante se ha eliminado del flujo normal, el div externo se rellena, como el div interno no está allí. Sin embargo, los elementos en línea (imágenes, enlaces, texto, blackquotes) respetarán los límites del elemento flotante. Si introduce texto en el div externo, el texto colocará arround de inner div.

En otras palabras, los elementos de bloque (encabezados, párrafos, divs, etc.) ignoran los elementos flotantes y los 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>

Me gustaría preguntar cómo funcionan la altura y la flotación. Tengo un div externo y un div interno que tiene contenido en él. Su altura puede variar según el contenido de la div interna, 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>

Es debido a la flotación de la div. Añadir overflow: hidden en el 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>

Demo

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

Te mostraré visualmente:

Más Explicación:

También puede agregar overflow: hidden; en los elementos del contenedor, pero le sugiero que use clear: both; en lugar.

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

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

¿Cómo funciona el CSS Float?

¿Qué es flotar exactamente y qué hace?

La mayoría de los principiantes no entienden bien la propiedad de float . Bueno, ¿qué hace exactamente float ? Inicialmente, la propiedad float se introdujo para hacer fluir el texto alrededor de las imágenes, que se desplazan hacia la left o hacia la right . Aquí hay otra explicación de @Madara Uchicha.
Entonces, ¿está mal usar la propiedad de float para colocar cajas una al lado de la otra? La respuesta es no ; no hay problema si usa la propiedad float para establecer cuadros uno al lado del otro.
Flotar un elemento de nivel en inline o de block hará que el elemento se comporte como un elemento de inline-block .
Demo
Si flota un elemento hacia la left o hacia la right , el width del elemento estará limitado al contenido que contenga, a menos que el width se defina explícitamente ...
No puedes hacer float un center elementos. Este es el mayor problema que siempre he visto con los principiantes, usando ~~float: center;~~ , que no es un valor válido para la propiedad float . float generalmente se usa para float / mover contenido hacia la izquierda o hacia la derecha . Solo hay cuatro valores válidos para la propiedad float , es decir, left , right , none (predeterminado) y inherit .
El elemento padre colapsa, cuando contiene elementos secundarios flotantes, para evitar esto, utilizamos clear: both; propiedad, para despejar los elementos flotados en ambos lados, lo que evitará el colapso del elemento principal. Para obtener más información, puede consultar mi otra respuesta here .
(Importante) Piénsalo 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 esconderán detrás de los elementos flotantes porque está en el nivel de pila por encima de los elementos flotados 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 las flotación 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 las casillas rojas, ya sea que pueda float a la left , o float a la left , y otra a la right también, depende del diseño, si son 3 columnas, puede float 2 columnas a la left donde otra más a la right depende, aunque en este ejemplo, tenemos un diseño simplificado de 2 columnas, por lo que float una a la left y la otra a la 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; }

Vamos paso a paso con el diseño y veremos cómo funciona el flotador.

En primer lugar, usamos el elemento contenedor principal, puedes asumir que es tu ventana gráfica, luego usamos header y asignamos una height de 50px así que no hay nada sofisticado allí. Es solo un elemento normal de nivel de bloque no flotante que ocupará el 100% espacio horizontal a menos que flote o le asignaremos inline-block en inline-block .

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

Columna flotaba a la izquierda

Y sí, si ves, el elemento padre, que es .wrapper está contraído, el que ves con un borde verde no se expandió, pero debería hacerlo ¿no? Regresaremos a eso por un tiempo, por ahora, tenemos una columna flotando a la left .

Llegando a la segunda columna, deja que float esta a la right

Otra columna flotó hacia la derecha

Aquí tenemos una columna de 300px ancho que 300px a la right , que se colocará al lado de la primera columna, ya que está flotando hacia la left , y como está flotando hacia la left , creó una canaleta vacía a la right , y dado que había mucha de espacio a la right , nuestro elemento right flotaba perfectamente junto al left .

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

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

Agregar, <div style="clear: both;"></div> antes de que .wrapper div .wrapper , como

<div class="wrapper clear">  <div style="clear: both;"></div> </div>

Demo

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

Usar overflow: hidden; en .wrapper

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

Demo

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

Demo (no se puede ver la sombra en los 4 lados, overflow: hidden; causa este problema)

¿Y ahora qué? Guarde un elemento, sin overflow: hidden; así que opta por un truco de solución claro, utiliza el fragmento de abajo en tu CSS, y al igual que usas el overflow: hidden; para el elemento padre, llame a la class abajo en el elemento padre para auto-borrar.

.clear:after { clear: both; content: ""; display: table; } <div class="wrapper clear">  </div>

Demo

Aquí, la sombra funciona según lo previsto, también, autorrellena el elemento padre que evita que se colapse.

Y, por último, utilizamos el pie de página después de clear los elementos flotados.

Demo

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

Bueno, depende, si está buscando un diseño receptivo, usará este valor muchas veces, cuando quiera que sus elementos flotantes rindan uno debajo de otro con una cierta resolución. Por ese float: none; la propiedad juega un papel importante allí.

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

El primer ejemplo que ya vimos es crear uno o más diseños de una columna.
Usar img flotando dentro de p que permitirá que nuestro contenido fluya.

Demo (sin img flotante)

Demostración 2 ( img flotando a la left )

Usando float para crear menú horizontal - Demo

Flote el segundo elemento también, o use `margin`

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

Supongamos que si eliminamos float: right; de nuestra class .floated_right , el div se representará desde la extrema left ya que no está flotante.

Demo

Entonces, en este caso, o puedes float hacia la left también

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

Necesita agregar overflow:auto a 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 jsFiddle

Te encuentras con el error de flotación (aunque no estoy seguro 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, 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 del div principal se extenderá más allá del último elemento. Desafortunadamente, la flotación de un elemento impide que el padre tenga en cuenta el elemento flotante al determinar su altura. Esto significa que si su último elemento está flotante, no "estirará" al padre de la misma manera que lo haría un elemento normal.

Claro

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

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

No debe ser visible, y al usar clear: both, asegúrese de que no se quede al lado del elemento flotante, sino después.

Rebosar:

El segundo método, que es preferido por la mayoría de las personas (creo) es cambiar el CSS del elemento principal 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á del fondo del niño flotante. Esto solo es cierto si no ha establecido una altura en el elemento primario, 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 momentos en que necesita que el overflow sea visible, en cuyo caso agregar un elemento de compensación es más que aceptable.

puede usar la propiedad de desbordamiento en el 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:

si necesita hacer que sus divs hijos floten a la izquierda, recomiendo el código a continuación a su div principal.

.parent_div{ display: flex; }

use <div style="clear: both;"></div> en la parte inferior de todos sus códigos, pero arriba </body></html>

Solo copia y pega

Será trabajo prefecto