You are here
Problema Float en CSS3 Sin categoría 

Problema Float en CSS3

Problema Float en CSS3

Muy a menudo en el diseño de una página web, queremos que algunos elementos de la izquierda y algunos elementos de la derecha y surge un Problema Float en CSS3.

Por lo general, nos gustaría utilizar la propiedad CSS flotador para crear este efecto.”float:left;” obliga al elemento HTML a la parte izquierda de su contenedor, y “float: right” fuerzas del elemento HTML en el lado derecho del contenedor.

Es posible que ya haya utilizado estas propiedades, pero que nunca han tenido problemas CSS float con el diseño. Considere este ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
#divContainer {
    background-color:#CCC;
    width:400px;
}
#div1 {
    background-color:#000;
    height:200px;
    width:200px;
    float:left;
}
#div2 {
    background-color:#666;
    height:300px;
    width:200px;
    float:right;
}
</style>
<div id="divContainer">
    <div id="div1"></div>
    <div id="div2"></div>
</div>

En la mayoría de los navegadores, se producirá el problema CSS float. Pero, ¿realmente se ve el error? Aviso en el elemento “divContainer” que tiene un color de fondo se ajusta a “#CCC”.

¿Por qué el color de fondo del recipiente que no se muestran en nuestro navegador? No muestra debido a que el “divContainer” no sabe lo que se ajuste alrededor.

Básicamente es confundido por la posición de nuestros elementos. Pruebe a establecer “div2” a “float: left;” y “div1” a “float: right”. Todavía se romperá en la mayoría de los navegadores, incluso con el div con mayor siendo el primer elemento. Los flotadores son muy singular y han causado un montón de dolores de cabeza entre los desarrolladores.

La solución a este problema es muy simple. Sólo tiene que decirle al navegador que tiene otro elemento por debajo de los 2 elementos flotantes para que el “divContainer” puede envolver todos los elementos interiores.

Veamos un ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
#divContainer {
    background-color:#CCC;
    width:400px;
}
#div1 {
    background-color:#000;
    height:200px;
    width:200px;
    float:left;
}
#div2 {
    background-color:#666;
    height:300px;
    width:200px;
    float:right;
}
</style>
<div id="divContainer">
    <div id="div1"></div>
    <div id="div2"></div>
    <br style="clear:both;" />
</div>

La diferencia de los dos ejemplos se reduce a un elemento en particular.

Que un nuevo elemento, el “ancho” con la propiedad CSS “claro” ajustado a “ambos”, resuelve el problema entero. Debo decir que el “ancho” se puede sustituir por otros elementos de bloque, como un div, para tener el mismo efecto.

Es propiedad CSS del HTML que hace todo el trabajo. Toda la propiedad CSS flotador hace es decirle al navegador dónde la parte inferior de “divContainer” es en realidad.

Esto es cómo resolver el problema CSS float molesta de envolturas div.


Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts