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 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
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
float Left
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
➢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;
}
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:
