Prev Page Next Page
Top

CSS float and clear

➢The CSS float property specifies how an element should float.
➢The CSS clear property specifies what elements can float beside the cleared element and on which side.

The float Property

➢The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.
The float property can have one of the following values:
left - The element floats to the left of its container
right - The element floats to the right of its container
none - The element does not float (will be displayed just where it occurs in the text). This is default
inherit - The element inherits the float value of its parent

float Right

EXAMPLE:

img {
    float: right;

}

RESULT:

BME EDUCATION OFFICIAL LOGO




Run


float Left

EXAMPLE:

img {
    float: left;

}

RESULT:

BME EDUCATION OFFICIAL LOGO




Run


CSS clear and clearfix

➢When we use the float property, and we want the next element below (not on right or left), we will have to use the clear property.
➢The clear property specifies what should happen with the element that is next to a floating element.
The clear property can have one of the following values:
none - The element is not pushed below left or right floated elements. This is default
left - The element is pushed below left floated elements
right - The element is pushed below right floated elements
both - The element is pushed below both left and right floated elements
inherit - The element inherits the clear value from its parent

EXAMPLE:

.div1 {
    float: left;

}

.div2 {
    clear: left;

}


The clearfix Hack

➢If a floated element is taller than the containing element, it will "overflow" outside of its container. We can then add a clearfix hack to solve this problem:

EXAMPLE:

div {
    overflow: auto;

}

Run


Prev Page Next Page





FEEDBACK

Rating


Message