1 1HTML y CSS
FlotaciónJorge Sánchez Asenjo, 2017
[email protected] @jorgesancheznet
Flotación
HTML5
2 2HTML y CSS
FlotaciónJorge Sánchez Asenjo, 2017
[email protected] @jorgesancheznet
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
FlotaciónJorge Sánchez Asenjo, 2017
[email protected] @jorgesancheznet
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ónJorge Sánchez Asenjo, 2017
[email protected] @jorgesancheznet
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
FlotaciónJorge Sánchez Asenjo, 2017
[email protected] @jorgesancheznet
Valores
• float:none• float:left• float:right
6 6HTML y CSS
FlotaciónJorge Sánchez Asenjo, 2017
[email protected] @jorgesancheznet
7 7HTML y CSS
FlotaciónJorge Sánchez Asenjo, 2017
[email protected] @jorgesancheznet
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
FlotaciónJorge Sánchez Asenjo, 2017
[email protected] @jorgesancheznet
shape-outside. Posibilidades
•none•margin-box• content-box•border-box•padding-box
9 9HTML y CSS
FlotaciónJorge Sánchez Asenjo, 2017
[email protected] @jorgesancheznet
1010HTML y CSS
FlotaciónJorge Sánchez Asenjo, 2017
[email protected] @jorgesancheznet
shape-outside. Posibilidades
• circle()•ellipse()•polygon(coordenadas)•url(img) La imagen indicada hace la forma
1111HTML y CSS
FlotaciónJorge Sánchez Asenjo, 2017
[email protected] @jorgesancheznet
1212HTML y CSS
FlotaciónJorge Sánchez Asenjo, 2017
[email protected] @jorgesancheznet
Top Related