Floating

Floating

 The float property is used to move the element left or right.

float
Syntax:
float: value;
Values: left | right | none
Default: auto
Applies to: all elements
Inherits: no

Example
 p { float: right;
 margin-to: 4px;
 color: black;
 background-color: green;
 }
Clear

 The clear property specifies if an element allows flotation elements to its sides.

clear
Syntax:
clear: value;
Values: left | right | both | none
Default: none
Applies to: block-level elements
Inherits: no

Example
h1 {clear: left;
 margin-top: 3em;
 }
Test Warp

 Change the shape of the warped text to a circle, ellipse, polygon, or any image shape by using the shape-outside property.

Shape-outside
Syntax:
shape-outside: value;
Values: none | circles() | ellipse() | polygon() | url() | [margin-box | padding-box | content-box]
Default: none
Applies to: floats
Inherits: no

Example
img {
 float: left;
 width: 300px;
 height: 300px;
 -web kit-shape-outside: circle(150px);
 shape-outside: circle(150px);
 }
Shape Margin

 The shape-margin property specifies an amount of space to hold between the shape and the warped text

shape-margin
Syntax:
shape-margin: value;
Values: length | percentage
Default: 0
Applies to: floats
Inherits: no

Example
 imge{
 float: left;
 shape-outside: circle(150px);
 -webkit-shape-outside: circle(150px);
 -web kit-shape-margin: 1em;
 shape-margin: 1em;
 }

Leave a Reply