CSS Modelo Cajas Posicionamiento

Lenguaje de Marcas
Unidad 4. Modelo de Cajas
Modelo de Cajas y Posicionamiento

Modelo de cajas ............................................................................................................ 1
Tamao: width y height ............................................................................................. 2
Imgenes .................................................................................................................. 3
Tamao mnimo y mximo: min-width, min-height, max-width y max-height.............. 4
Desbordamiento: overflow ......................................................................................... 4
Margen ......................................................................................................................... 5
Comportamiento de los mrgenes verticales ......................................................... 7
Margen interior (padding) .............................................................................................. 8
Bordes .......................................................................................................................... 8
La propiedad compuesta border ................................................................................ 8
Estilos de bordes ....................................................................................................... 9
Las propiedades compuestas border-top, border-right, border-bottom y border-left 11
Las propiedades border-color, border-width y border-style ...................................... 12
Las propiedades individuales .................................................................................. 14
Bordes en <html> y <body> .................................................................................... 14
Posicionamiento ......................................................................................................... 15
Posicionamiento flotante: float y clear ..................................................................... 15
Posicionamiento flotante de caracteres: letra capital ............................................... 16
Posicionamiento flotante de imgenes .................................................................... 16
La propiedad float ................................................................................................ 16
La propiedad clear................................................................................................... 18
Centrar una imagen ................................................................................................. 18
Posicionamiento flotante de otros elementos .......................................................... 19
Tamao de los elementos que contienen elementos flotantes ................................ 19
Lneas Horizontales .................................................................................................... 20
Tamao: width y height ........................................................................................... 20
Color: color y background-color ............................................................................... 20
Alineacin: margin-left, margin-right y width ............................................................ 20
Modelo de cajas
Es la caracterstica ms importante de CSS, cualquier elemento de una pgina web
est contenido en una "caja" rectangular. Las cajas de una pgina se crean
automticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva
caja rectangular que encierra los contenidos de ese elemento, estas no son visibles a
1
Lenguaje de Marcas
simple vista ya que inicialmente no presentan ningn color especial, ni de fondo ni de

borde.
La imagen siguiente muestra un prrafo de texto con borde y mrgenes exterior e

interior.
Las partes que componen cada caja y su orden de visualizacin desde el punto de
vista del usuario son las siguientes:
Contenido (content): se trata del contenido HTML del elemento (las palabras de
un prrafo, una imagen, el texto de una lista de elementos, etc.)
Relleno (padding): espacio libre opcional existente entre el contenido y el
borde.
Borde (border): lnea que encierra completamente el contenido y su relleno.
Imagen de fondo (background image): imagen que se muestra por detrs del
contenido y el espacio de relleno.
Color de fondo (background color): color que se muestra por detrs del
contenido y el espacio de relleno.
Margen (margin): separacin opcional existente entre la caja y el resto de cajas
adyacentes.
Tanto el margen exterior (margin) como el margen interior (padding) son

transparentes. Por eso el margen interior se ve del color de fondo del elemento (en el
ejemplo, del color de fondo del prrafo), mientras que el margen exterior se ve del
color de fondo del elemento padre (en el ejemplo, del color de fondo de la pgina).
Tamao: width y height

La propiedad width establece el ancho de un elemento mediante un valor numrico
(con su unidad) o un porcentaje (con respecto al elemento padre). Si no se establece
la anchura de un elemento, el elemento ocupa todo el ancho disponible. El valor
inherit indica que la anchura del elemento se hereda de su elemento padre. El valor
auto, que es el que se utiliza si no se establece de forma explcita un valor a esta
propiedad, indica que el navegador debe calcular automticamente la anchura del
elemento, teniendo en cuenta sus contenidos y el sitio disponible en la pgina.
2
Lenguaje de Marcas
Al igual que sucede con width, la propiedad height no admite valores negativos. Si se
indica un porcentaje, se toma como referencia la altura del elemento padre. Si el
elemento padre no tiene una altura definida explcitamente, se asigna el valor auto a la
altura.
El valor inherit indica que la altura del elemento se hereda de su elemento padre. El
valor auto, que es el que se utiliza si no se establece de forma explcita un valor a esta
propiedad, indica que el navegador debe calcular automticamente la altura del
elemento, teniendo en cuenta sus contenidos y el sitio disponible en la pgina.
Si se establece la anchura y altura de un elemento, el contenido del elemento puede
no caber en el tamao asignado. La propiedad overflow establece el comportamiento
en esto casos.
Imgenes
Las propiedades width y height tambin se pueden aplicar a imgenes (esos valores
tienen prioridad sobre los establecidos en los atributos width y height de la etiqueta
<img>).
Si la etiqueta <img> no tiene los atributos width y height:
si slo se indica una propiedad (width o height), la imagen cambia de tamao

manteniendo la proporcin.
si se indican las dos propiedades (width y height), la imagen cambia al tamao
indicado.
Si la etiqueta <img> tiene los atributos width y height:
si slo se indica una propiedad (width o height), la imagen cambia de tamao

solamente en la dimensin indicada.
si se indican las dos propiedades (width y height), la imagen cambia al tamao
indicado.
3
Lenguaje de Marcas
Si el tamao se expresa en porcentaje, se interpreta con respecto al elemento

que lo contiene. En el ejemplo siguiente, la imagen ocupa la mitad del espacio.
Tamao mnimo y mximo: min-width, min-height, max-width y max-

height
Las propiedades min-width y min-height establecen el tamao mnimo de un
elemento mediante un valor numrico (con su unidad) o un porcentaje (con respecto al
elemento padre).
Las propiedades max-width y max-height establecen el tamao mximo de un
elemento mediante un valor numrico (con su unidad) o un porcentaje (con respecto al
elemento padre).
Los ejemplos siguientes muestran el funcionamiento de las propiedades anteriores.
Los tamaos de divisin definidos en porcentaje se refieren a porcentajes con respecto
al ancho de la celda de la tabla, que a su vez depende del ancho de la ventana del
navegador. Al estrechar la ventana se puede observar cmo se estrechan las
divisiones cuyo tamao est expresado en porcentaje, mientras que permanecen
iguales aquellas cuyo tamao est expresado en pxeles, y cmo las propiedades min-
width y max-width limitan el estrechamiento.
Desbordamiento: overflow
La propiedad overflow establece el tratamiento que debe dar el navegador al contenido

que no cabe en el elemento padre. Los valores posibles de esta propiedad son: visible,
4
Lenguaje de Marcas
hidden (oculto), scroll (mostrar siempre barras de desplazamiento), auto (mostrar

barras cuando sea necesario). El valor por omisin es visible.
Si est definido el tamao del elemento y overflow tiene el valor visible, el contenido
desborda el elemento y se superpone a los siguientes elementos.
Margen
CSS define cuatro propiedades para controlar cada uno de los mrgenes horizontales
y verticales. Cada una de las propiedades establece la separacin entre el borde
lateral de la caja y el resto de cajas adyacentes:
5
Lenguaje de Marcas
Las unidades ms utilizadas para indicar los mrgenes de un elemento son los pxeles
(cuando se requiere una precisin total), los em (para hacer diseos que mantengan
las proporciones) y los porcentajes (para hacer diseos lquidos o fluidos).
El siguiente ejemplo aade un margen izquierdo al segundo prrafo:

.destacado {
margin-left: 2em;
}
Los mrgenes verticales (margin-top y margin-bottom) slo se pueden aplicar a los
elementos de bloque y las imgenes, mientras que los mrgenes laterales (margin-left
y margin-right) se pueden aplicar a cualquier elemento
La propiedad margin permite establecer el tamao del margen exterior. Como en el

caso de las propiedades border-color, border-width y border-style se pueden escribir
de uno a cuatro valores, que se interpretan de la siguiente manera:
1 valor: este valor se aplica a los cuatro lados

2 valores: el primer valor se aplica a los lados inferior y superior y el segundo a
los lados derecho e izquierdo
3 valores: el primer valor se aplica al lado superior, el segundo a los lados
derecho e izquierdo y el tercer valor al lado inferior
4 valores: el primer valor se aplica al lado superior, el segundo al lado derecho,
el tercer valor al lado inferior y el cuarto al lado izquierdo
Cdigo CSS equivalente:

div img {
margin-top: .5em;
margin-bottom: .5em;
margin-left: 1em;
margin-right: .5em;
}
Alternativa directa:
div img {
margin: .5em .5em .5m 1em;
}
Otra alternativa:
6
Lenguaje de Marcas
div img {
margin: .5em;
margin-left: 1em;
}
Comportamiento de los mrgenes verticales

El comportamiento de los mrgenes verticales es ms complejo de lo que se puede
imaginar. Cuando se juntan dos o ms mrgenes verticales, se fusionan de forma
automtica y la altura del nuevo margen ser igual a la altura del margen ms alto de
los que se han fusionado.
De la misma forma, si un elemento est contenido dentro de otro elemento, sus

mrgenes verticales se fusionan y resultan en un nuevo margen de la misma altura
que el mayor margen de los que se han fusionado:
Aunque en principio puede parecer un comportamiento extrao, la razn por la que se

propuso este mecanismo de fusin automtica de mrgenes verticales es el de dar
uniformidad a las pginas web habituales. En una pgina con varios prrafos, si no se
diera este comportamiento y se estableciera un determinado margen a todos los
prrafos, el primer prrafo no mostrara un aspecto homogneo respecto de los
dems.
7
Lenguaje de Marcas
En el caso de un elemento que se encuentra en el interior de otro y sus mrgenes se

fusionan de forma automtica, se puede evitar este comportamiento aadiendo un
pequeo relleno ( padding: 1px) o un borde ( border: 1px solid transparent) al
elemento contenedor.
Margen interior (padding)

El margen interior de un elemento es el espacio transparente situado entre el elemento
y el borde. Este espacio se puede de definir aunque el elemento no tenga borde.
La propiedad padding permite establecer el tamao del margen interior. Como en el
caso de las propiedades border-color, border-width y border-style se pueden escribir
de uno a cuatro valores, que se interpretan de la siguiente manera:
1 valor: este valor se aplica a los cuatro lados
2 valores: el primer valor se aplica a los lados inferior y superior y el segundo a
los lados derecho e izquierdo
3 valores: el primer valor se aplica al lado superior, el segundo a los lados
derecho e izquierdo y el tercer valor al lado inferior
4 valores: el primer valor se aplica al lado superior, el segundo al lado derecho,
el tercer valor al lado inferior y el cuarto al lado izquierdo
Bordes
Cualquier elemento de una pgina web puede tener un borde (en ingls,
border).
La propiedad compuesta border
La propiedad compuesta border permite establecer simultneamente los cuatro

bordes (arriba, derecha, abajo e izquierda) de un elemento, definiendo su:
color (nombre de color o cdigo RGB o el valor transparent)

grosor (valor absoluto de distancia, o los valores thin (fino), medium (medio)
o thick (grueso))
estilo
Las tres caractersticas del borde se pueden escribir en cualquier orden.

8
Lenguaje de Marcas
p {
border: red 5px Esto es un prrafo con borde de estilo solid.
solid;
}
Estilos de bordes
Los estilos de bordes definidos en CSS 2 son none, hidden, dotted, dashed,
solid, double, groove, ridge, inset y outset.
9
Lenguaje de Marcas
Los estilos groove, ridge inset y outset producen un efecto tridimensional,

pero el resultado depende del color del borde y de los colores de fondo del
elemento y del elemento superior:
10
Lenguaje de Marcas
Los estilos none y hidden producen el mismo resultado (no se muestra el

borde).
Las propiedades compuestas border-top, border-right, border-

bottom y border-left
Las propiedades compuestas border-top, border-right, border-bottom y border-

left permiten establecer de forma independiente los cuatro bordes (arriba,
derecha, abajo e izquierda, respectivamente) de un elemento, definiendo su
color, su grosor y su estilo. Se pueden escribir las tres caractersticas de cada
borde en cualquier orden. Se puede definir uno, dos, tres o cuatro bordes.
11
Lenguaje de Marcas
Las propiedades border-color, border-width y border-style
Las propiedades border-color, border-width y border-style permiten establecer,

respectivamente, el color, el grosor y el estilo de los cuatro bordes de un
elemento. A cada una de las propiedades se le puedes dar uno, dos, tres o
cuatro valores, que se interpretan de la siguiente manera:
1 valor: este valor se aplica a los cuatro bordes

2 valores: el primer valor se aplica a los bordes inferior y superior y el segundo
a los bordes derecho e izquierdo
3 valores: el primer valor se aplica al borde superior, el segundo a los bordes
derecho e izquierdo y el tercer valor al borde inferior
4 valores: el primer valor se aplica al borde superior, el segundo al borde
derecho, el tercer valor al borde inferior y el cuarto al borde izquierdo
12
Lenguaje de Marcas
En general, para que el navegador muestre un borde, se tendran que definir

las tres propiedades (color, grosor y estilo), pero en realidad se puede
comprobar que con slo definir el estilo ya se muestra un borde negro. El
motivo es que la hoja de estilo predeterminada de los navegadores define un
color y un grosor por omisin y al definir el estilo se completa la definicin del
borde.
Si no define el estilo del borde, aunque se defina el color y el grosor los

navegadores no muestran el borde.
13
Lenguaje de Marcas
Las propiedades individuales
Se puede establecer de forma independiente cada propiedad de cada borde

mediante las propiedades:
border-top-color, border-right-color, border-bottom-color, border-

left-color
border-top-width, border-right-width, border-bottom-width, border-
left-width
border-top-style, border-right-style, border-bottom-style, border-
left-style
En general, para que el navegador muestre un borde, se tienen que definir las
tres propiedades (color, grosor y estilo), aunque normalmente los navegadores
asignan el color negro como color prederminado, por lo que si no se establece
el color del borde suele mostrarse de color negro
Bordes en <html> y <body>
Las etiquetas <html> y <body> tambin pueden tener bordes, como muestra la
siguiente hoja de estilo.
html {
background-color: pink;
border: red 10px solid;
margin: 50px;
padding: 50px;
}
body {
background-color: lightblue;
border: blue 10px solid;
font-family: sans-serif;
margin: 50px;
padding: 50px;
}
h1 {
text-align: center;
}
La pgina sera:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8>
<title>Ejemplo border en html y body </title>
14
Lenguaje de Marcas
<link href="border_html_body.css" rel="stylesheet" type="text/css"

title="Color">
</head>
<body>
<h1>border en body y html</h1>
<p>En la hoja de estilo de esta pgina, las etiquetas html y

body tienen
definida las propiedades border, margin y padding:</p>
<ul>
<li>La etiqueta html tiene borde de color rojo y el color de
fondo de color
rosa.</li>
<li>La etiqueta body tiene borde de color azul y el color de
fondo de color
azul claro.</li>
<li>Tanto html como body tienen los mismos mrgenes exteriores
e interiores
(50 pxeles).</li>
</ul>
</body>
</html>
CSS ofrece nuevas propiedades y estilos para los bordes, lo veremos en un anexo
Posicionamiento
Posicionamiento flotante: float y clear
La propiedad float establece el esquema de posicionamiento flotante para un

elemento. Cuando existe un elemento flotante, los elementos que se
encuentran a continuacin del elemento flotante fluyen a lo largo de l, salvo
que haya un elemento que tenga establecido la propiedad clear.
15
Lenguaje de Marcas
Las propiedades float y clear se pueden aplicar a cualquier elemento de

una pgina web.
Posicionamiento flotante de caracteres: letra capital
Se puede crear una letra capital aplicando la propiedad float a la primera letra
de un prrafo. En el ejemplo siguiente se utiliza la pseudo-clase :first-letter, por
lo que no hace falta aplicar la propiedad clear.
Posicionamiento flotante de imgenes

La propiedad float
Las imgenes son elementos en lnea, es decir, que se insertan como si fueran
caracteres, formando parte del prrafo o del elemento de bloque en el que se
insertan. La altura de la lnea en la que est insertado el elemento aumenta lo
necesario para poder alojar la imagen, como muestra el siguiente ejemplo, en
el que la hoja de estilo no contiene ninguna propiedad relacionada con la
imagen.
img {
}
Este prrafo tiene insertada una
imagen al principio del prrafo. Se trata del logotipo
de GNU. GNU es un acrnimo recursivo que
significa "GNU is Not Unix" (GNU No es Unix). GNU
es un proyecto de software libre iniciado por Richard
Stallman en 1984. La imagen forma parte del
16
Lenguaje de Marcas
prrafo, es una letra ms en la primera lnea.
Si se quiere que una imagen aparezca a la izquierda (o a la derecha) de un

texto, es decir, que el texto fluya a lo largo de la imagen, hay que utilizar la
propiedad float. Esta propiedad slo admite dos valores, left y right, que sitan
la imagen a la izquierda o a la derecha, como muestran los ejemplos siguientes.
Para que las imgenes salgan correctamente alineadas con el texto, la imagen
debe insertarse al principio del texto, independientemente de la posicin final
que vaya a tener la imagen. Los siguientes ejemplos muestran las diferencias
17
Lenguaje de Marcas
La propiedad clear
Al crear una imagen flotante, el navegador sita los elementos que se

encuentran a continuacin de la imagen a su lado mientras haya sitio, aunque
no pertenezcan al mismo bloque.
Para impedir que ocurra esto, es necesario que la flotacin de la imagen se

interrumpa. La propiedad clear hace que un elemento no tenga elementos
flotantes a su lado. Los posibles valores de clear son:
left, que hace que no hayan elementos flotantes a la izquierda,

right, que hace que no hayan elementos flotantes a la derecha,
both, que hace que no hayan elementos flotantes ni a derecha ni a izquierda,
none, que permite que hayan elementos flotantes a derecha y a izquierda
(valor por omisin).
Se puede asignar la propiedad clear a cualquier elemento. En el ejemplo

siguiente se ha asignado a una lnea horizontal, de manera que la lnea ya no
flota a la derecha de la imagen, sino que se muestra a continuacin de la
imagen:
Centrar una imagen
La propiedad float no permite centrar objetos. Para centrar una imagen, el

elemento que contiene a la imagen tiene que tener su contenido centrado.
Por ejemplo, si la imagen est en un prrafo, se puede definir la clase

"p.centrado" con el atributo text-align establecido con el valor center y despus
dar al prrafo que contiene la imagen la clase "centrado". Lgicamente, si se
aade texto al prrafo, el texto tambin se centrar.
18
Lenguaje de Marcas
Posicionamiento flotante de otros elementos
La propiedad float se puede aplicar a cualquier elemento. En el ejemplo

siguiente se ha aplicado la propiedad float a los prrafos (para que los prrafos
floten uno al lado del otro en vez de ocupar de lado a lado, es necesario
asignarles tamao con las propiedades width y height).
Tamao de los elementos que contienen elementos flotantes
Los elementos flotantes no se tienen en cuenta al calcular el tamao de los

elementos que los contienen. Por ejemplo, si un imagen flotante forma parte de
una divisin con borde, la imagen puede "salirse" del borde, como se ve en
siguiente ejemplo:
Si se quiere que la divisin incluya la imagen, se puede conseguir de varias

maneras:
Una primera solucin podra ser dar la propiedad clear: both al segundo prrafo.
Una segunda solucin podra ser insertar un tercer prrafo vaco con la
propiedad clear: both (y no ponersela al segundo prrafo). En la primera
solucin, el segundo prrafo ya no fluye a la derecha de la imagen, mientras
que en la segunda s lo hace.
19
Lenguaje de Marcas
Una tercera solucin sera dar una altura mnima a la divisin mayor con la
propiedad min-height. La altura debe ser mayor que la altura de la imagen.
Lneas Horizontales
Tamao: width y height
La propiedad height establece la altura de la lnea.
La propiedad width establece la anchura de la lnea. Se suele expresar como

porcentaje.
Color: color y background-color
La propiedad background-color establece el color de la lnea, aunque en

Firefox la lnea debe tener ms de 2px de altura para ser visible y en Internet
Explorer y Chrome debe tener establecida la propiedad height.
En Firefox la propiedad color establece el color del borde de la lnea, pero en

Internet Explorer y Chrome no lo hace.
En Firefox, Internet Explorer y Chrome la propiedad border-color establece el

color del borde de la lnea (aunque no se ve exactamente igual en Internet
Explorer).
Alineacin: margin-left, margin-right y width
Si no se indican los mrgenes, las lneas se alinean al centro.

hr {
background-color: red;
height: 10px;
width: 50%;
}
Para situar la lnea en una posicin determinada, se deben utilizar las

propiedades margin-left y margin-right, sin utilizar la propiedad width. Los
valores de estas propiedades se pueden expresar como distancias o como
porcentajes.
20
Lenguaje de Marcas
hr {
height: 10px;
margin-left: 0%;
margin-right: 50%
}
hr {
height: 10px;
margin-left: 50%;
margin-right: 0%
}
hr {
height: 10px;
margin-left: 50%;
margin-right: 25%
}
Internet Explorer no interpreta correctamente las propiedades margin-left

y margin-right cuando se utilizan junto con width.
En Firefox y Chrome, la lnea se dibuja a la izquierda del espacio

definido por los mrgenes.
En Internet Explorer, la lnea se dibuja en el centro del espacio definido
por los mrgenes.
En el ejemplo siguiente, la lnea se sita a la izquierda del todo en Firefox y

Chrome, pero en el centro en Internet Explorer:
hr {
height: 10px;
margin-left: 0%;
width: 50%;
}
En el ejemplo siguiente, la lnea se sita a la derecha del todo en Firefox y

Chrome, pero en el centro en Internet Explorer:
hr {
height: 10px;
margin-right: 0%;
width: 50%;
}
En el ejemplo siguiente, la lnea se sita a partir del centro en Firefox y Chrome,

perEn el ejemplo siguiente, la lnea se sita a partir del centro en Firefox y
Chrome, pero en el centro de la mitad derecha en Internet Explorer:
hr {
height: 10px;
21
Lenguaje de Marcas
margin-left: 50%;
width: 25%;
}
22

CSS Modelo Cajas Posicionamiento

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

CSS Modelo Cajas Posicionamiento

Transféré par

Droits d'auteur :

Formats disponibles

Lenguaje de Marcas

Unidad 4. Modelo de Cajas

Modelo de Cajas y Posicionamiento

simple vista ya que inicialmente no presentan ningn color especial, ni de fondo ni de

La imagen siguiente muestra un prrafo de texto con borde y mrgenes exterior e

Tanto el margen exterior (margin) como el margen interior (padding) son

Tamao: width y height

Si la etiqueta <img> no tiene los atributos width y height:

si slo se indica una propiedad (width o height), la imagen cambia de tamao

Si la etiqueta <img> tiene los atributos width y height:

si slo se indica una propiedad (width o height), la imagen cambia de tamao

Si el tamao se expresa en porcentaje, se interpreta con respecto al elemento

Tamao mnimo y mximo: min-width, min-height, max-width y max-

La propiedad overflow establece el tratamiento que debe dar el navegador al contenido

hidden (oculto), scroll (mostrar siempre barras de desplazamiento), auto (mostrar

El siguiente ejemplo aade un margen izquierdo al segundo prrafo:

La propiedad margin permite establecer el tamao del margen exterior. Como en el

1 valor: este valor se aplica a los cuatro lados

Cdigo CSS equivalente:

Comportamiento de los mrgenes verticales

De la misma forma, si un elemento est contenido dentro de otro elemento, sus

Aunque en principio puede parecer un comportamiento extrao, la razn por la que se

En el caso de un elemento que se encuentra en el interior de otro y sus mrgenes se

Margen interior (padding)

La propiedad compuesta border

La propiedad compuesta border permite establecer simultneamente los cuatro

color (nombre de color o cdigo RGB o el valor transparent)

Las tres caractersticas del borde se pueden escribir en cualquier orden.

Los estilos groove, ridge inset y outset producen un efecto tridimensional,

Los estilos none y hidden producen el mismo resultado (no se muestra el

Las propiedades compuestas border-top, border-right, border-

Las propiedades compuestas border-top, border-right, border-bottom y border-

Las propiedades border-color, border-width y border-style

Las propiedades border-color, border-width y border-style permiten establecer,

1 valor: este valor se aplica a los cuatro bordes

En general, para que el navegador muestre un borde, se tendran que definir

Si no define el estilo del borde, aunque se defina el color y el grosor los

Las propiedades individuales

Se puede establecer de forma independiente cada propiedad de cada borde

border-top-color, border-right-color, border-bottom-color, border-

Bordes en <html> y <body>

<link href="border_html_body.css" rel="stylesheet" type="text/css"

<h1>border en body y html</h1>

<p>En la hoja de estilo de esta pgina, las etiquetas html y

La propiedad float establece el esquema de posicionamiento flotante para un

Las propiedades float y clear se pueden aplicar a cualquier elemento de

Posicionamiento flotante de caracteres: letra capital

Posicionamiento flotante de imgenes

prrafo, es una letra ms en la primera lnea.

Si se quiere que una imagen aparezca a la izquierda (o a la derecha) de un

Al crear una imagen flotante, el navegador sita los elementos que se

Para impedir que ocurra esto, es necesario que la flotacin de la imagen se

left, que hace que no hayan elementos flotantes a la izquierda,

Se puede asignar la propiedad clear a cualquier elemento. En el ejemplo

Centrar una imagen

La propiedad float no permite centrar objetos. Para centrar una imagen, el

Por ejemplo, si la imagen est en un prrafo, se puede definir la clase

Posicionamiento flotante de otros elementos

La propiedad float se puede aplicar a cualquier elemento. En el ejemplo

Tamao de los elementos que contienen elementos flotantes

Los elementos flotantes no se tienen en cuenta al calcular el tamao de los

Si se quiere que la divisin incluya la imagen, se puede conseguir de varias

La propiedad height establece la altura de la lnea.

La propiedad width establece la anchura de la lnea. Se suele expresar como