HTML+CSS Easy to Get Started with Float (float)

What is Float

CSS Float will move the element to the left or right, and the surrounding elements will also be rearranged.

Float (float) is often used for images, but it is also very useful in layout

How elements float

The elements float horizontally, which means that the elements can only move left and right but not up and down.

A floating element will try to move left or right until its outer edge touches the border of the containing box or another floating box.

Elements after the floated element will surround it.

Elements before the floated element will not be affected.

If the image is right-floated, the text flow below will wrap to the left of it

div{

float:right;

}

Below we will do an example: for example, there are 2 divs with different backgrounds