CSS Float Property
The float
property places an element on the left or right side of its container, allowing text and inline elements to wrap around it.
The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
The float
property can be set to one of the following values:
-
left
: element will float to the left of its container. -
right
: element will float to the right of its container. none
: element will not float and will remain in the normal flow of the document.-
inherit
: element will inherit the float value of its parent element.
Here's an example of how to use the float
property:
Editor
In this example:
- we have two
div
elements with the classesleft
andright
. - Both elements have a fixed width and height and a background color.
left
element is set tofloat: left
, which means that it will be floated to the left of the container.- right element is set to
float: right
, which means that it will be floated to the right of the container. - Because both elements are floated, they are taken out of the normal flow of the document and moved to the left and right of the container.
Clearing Floats
When an element is floated, its parent no longer contains it because the float is removed from the flow. This can cause problems with margins, borders, and backgrounds of the parent element.
To fix this, the clear
property can be used to specify whether an element should be next to the floated elements or whether it should move below them.
The clear
property can be set to one of the following values:
-
left
: element will be moved below any floated element on the left side. -
right
: element will be moved below any floated element on the right side. -
both
: element will be moved below any floated element on either side. -
none
: element will not be moved below any floated element. -
inherit
: element will inherit the clear value of its parent element.
Here's an example of how to use the clear
property:
.clear {
clear: both;
}
In this example:
- we have a
div
element with the classclear
. - The
clear
class has aclear: both
property, which means that it will be moved below any floated element on either side.