Floats

A float is a CSS layout property that allows an element to be placed alongside its parent element's left or right side, where text and inline elements will wrap around it. Floats are often used to create multi-column layouts, and they can also be used to create simple text wrap effects.
To use floats in CSS, you must first apply the float property to an element. You can do this by adding the float property to a rule set in your stylesheet and assigning it a value of either left or right. For example:

This will cause the element with a class of 'floated-element' to be floated to the left side of its parent element, with text and inline elements wrapping around it. You can also use the right value to float the element to the right side of its parent element.

When you float an element, it is removed from the document's normal flow, which can cause other elements to behave unexpectedly. To fix this, you can use the clear property to specify which sides of an element should not be adjacent to a floated element.

For example, to prevent an element from appearing alongside a left-floated element, you can use the following rule:

You can also use the left, right, both, or none values to specify which sides of an element should not be adjacent to a floated element.