PDF de programación - Flotación HTM5

Flotación

HTML5

HTML y CSS
Flotación
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

1 1

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

HTML y CSS
Flotación
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

2 2

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

HTML y CSS
Flotación
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

3 3

Flotación

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

HTML y CSS
Flotación
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

4 4

Valores

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

HTML y CSS
Flotación
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

5 5

HTML y CSS
Flotación
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

6 6

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

HTML y CSS
Flotación
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

7 7

shape-outside. Posibilidades

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

HTML y CSS
Flotación
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

8 8

HTML y CSS
Flotación
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

9 9

shape-outside. Posibilidades

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

HTML y CSS
Flotación
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

1010

HTML y CSS
Flotación
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

1111

HTML y CSS
Flotación
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

1212