Flotación - Jorge Sanchezjorgesanchez.net/presentaciones/lenguajes-de-marcas/css/css-flotac… ·...

1 1HTML y CSS

FlotaciónJorge Sánchez Asenjo, 2017

[email protected] @jorgesancheznet

Flotación

HTML5

2 2HTML y CSS



Propiedad float

•Normalmente los elementos HTML aparecen en la posición indicada en el código•Dependiendo de la propiedad display, puede haber otros elementos en la misma línea (inline o inline-box) o aparte (box)•Sin embargo podemos indicar de qué forma deben aparecer respecto a su alrededor

3 3HTML y CSS



Posibilidades

•Normalmente los elementos HTML aparecen en la posición indicada en el código•Dependiendo de la propiedad display, puede haber otros elementos en la misma línea (inline o inline-box) o aparte (box)•Sin embargo podemos indicar de qué forma deben aparecer respecto a su alrededor

4 4HTML y CSS



Flotación

•Un elemento “flota” si admite que el texto fluya a su alrededor•La propiedad que lo consigue es float

5 5HTML y CSS



Valores

• float:none• float:left• float:right

6 6HTML y CSS



7 7HTML y CSS



shape-outside

•Nueva propiedad solo disponible para los navegadores con motor webkit (Chrome, Safari, Opera)•En algunas versiones requiere el prefijo –webkit-•Permite que el texto fluya alrededor de un objeto en formas geométricas

8 8HTML y CSS



shape-outside. Posibilidades

•none•margin-box• content-box•border-box•padding-box

9 9HTML y CSS



1010HTML y CSS



shape-outside. Posibilidades

• circle()•ellipse()•polygon(coordenadas)•url(img) La imagen indicada hace la forma

1111HTML y CSS



1212HTML y CSS



Flotación - Jorge Sanchezjorgesanchez.net/presentaciones/lenguajes-de-marcas/css/css-flotac… ·...

Documents

Transcript of Flotación - Jorge Sanchezjorgesanchez.net/presentaciones/lenguajes-de-marcas/css/css-flotac… ·...