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:
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ónSi 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;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 ...
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 .