CSS Float and Clear Properties

CSS Float Property

CSS float is a property that pushes any element to float (right, left, none, inherit) inside its parent body, allowing other elements to wrap around it.

This property defines the flow of content. It is generally used with images and layouts.

For eg. : Images in newspapers and articles are placed in a certain position with the rest of the content wrapped around it.

This property has the following values: left, right, inherit, and none.

CSS Float Left

Using float: left property, the element is floated to the left side of its parent element’s content area.

Example:

p {

float: left;

background: #ff5722;

width: 100px;

padding: 30px 0;

text-align: center;

}

CSS Float Right

Using float: right property, the element is floated to the right side of its parent element’s content area.

Example:

p {

float: right;

background: #ff5722;

width: 100px;

padding: 30px 0;

text-align: center;

}

CSS Float None

The float: none is a default value, In this, the element is not floated.

Example:

p {

float: none;

background: #ff5722;

width: 100px;

padding: 30px 0;

text-align: center;

}

CSS Clear Property

The CSS clear property controls the behavior of the floating element by preventing the overlapping of consecutive elements over the floating element.

The clear property values specify the side on which the floating element is not supposed to float.

The values of this property can be none, left, right, both, inherit.

CSS Clear Left

This property specifies that elements are not allowed to Float on the left side in relation to other elements.

Example:

.withoutclear {

float: left;

width: 100px;

height: 50px;

margin: 10px;

border: 3px solid blue;

}

.p1 {

border: 1px solid red;

}

.withclear {

float: left;

width: 100px;

height: 50px;

margin: 10px;

border: 3px solid blue;

}

.p2 {

border: 1px solid red;

clear: left;

}

CSS Clear Right

This property specifies that elements are not allowed to Float on the right side in relation to other elements.

Example:

.withoutclear {

float: right;

width: 100px;

height: 50px;

margin: 10px;

border: 3px solid blue;

}

.p1 {

border: 1px solid red;

}

.withclear {

float: right;

width: 100px;

height: 50px;

margin: 10px;

border: 3px solid blue;

}

.p2 {

border: 1px solid red;

clear: right;

}

Clear None

This property specifies that an element that is allowed to Float on both sides in relation to other elements.

Example:

.withoutclear {

float: left;

width: 100px;

height: 50px;

margin: 10px;

border: 3px solid blue;

}

.p1 {

border: 1px solid red;

}

.withclear {

float: right;

width: 100px;

height: 50px;

margin: 10px;

border: 3px solid blue;

}

.p2 {

border: 1px solid red;

clear: none;

}

CSS box-sizing Property

The box-sizing CSS property defines how the user should calculate the total width and height of an element i.e padding and borders, are to be included or not.

This property has the following values: content-box, border-box, initial, and inherit.

Example:

.content-box {

box-sizing: content-box;

width: 250px;

height: 80px;

padding: 30px;

border: 5px solid #ff5722;

}

.border-box {

box-sizing: border-box;

width: 250px;

height: 80px;

padding: 30px;

border: 5px solid #ff5722;

}

You Are Here

CSS Float and Clear Properties

CSS Float Property

CSS Float Left

Example:

CSS Float Right

Example:

CSS Float None

Example:

CSS Clear Property

CSS Clear Left

Example:

CSS Clear Right

Example:

Clear None

Example:

CSS box-sizing Property

Example:

Ask a Question Cancel reply