CSS Float Clear

What is float in CSS?

The float property allows an element to “float” to the left or right of its container, letting text or other inline elements wrap around it.

img {
  float: left;
}

Values of float:

• left → floats the element to the left.
• right → floats the element to the right.
• none → default (no float).
• inherit → takes value from parent.

What is clear in CSS?

The clear property is used to prevent elements from flowing next to floated elements. It pushes the element below the float.

div {
  clear: both;
}

Values of clear:

• left → clears left-floated elements
• right → clears right-floated elements
• both → clears both sides
• none → default