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.
CSS Float Right
Using float: right property, the element is floated to the right side of its parent element’s content area.
CSS Float None
The float: none is a default value, In this, the element is not floated.
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.
CSS Clear Right
This property specifies that elements are not allowed to Float on the right side in relation to other elements.
This property specifies that an element that is allowed to Float on both sides in relation to other elements.
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.