CSS Float

In CSS, the float property is used to specify how an element should be positioned within its parent container and how it interacts with the surrounding elements. When an element is floated, it is taken out of the normal document flow and moved to the left or right of its containing element. Other elements then flow around it.

The float property can take one of the following values:

Left: The element is floated to the left.

Example

.example {
    float: left;
}

You can click on above box to edit the code and run again.

Output

flying-green Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

Right: The element is floated to the right.

Example

.example {
    float: right;
}

You can click on above box to edit the code and run again.

Output

None (default): The element is not floated, and it will be displayed in the normal flow of the document.

Example

.example {
    float: none;
}

You can click on above box to edit the code and run again.

Output

Inherit: The element will inherit the float property from its parent element.

Example

.example {
    float: inherit;
}

You can click on above box to edit the code and run again.

Output

Floating elements can be used to create interesting layouts, such as multi-column designs or text wrapping around images. However, it's important to note that floated elements can sometimes lead to layout issues, and clearing floats may be necessary to ensure proper rendering.