CSS float Property

The float CSS property is used to position elements to the left and right of their container, as well as to allow text and inline elements to wrap around it. The float property defines the page's content flow. If an element is removed from the normal flow of the content, the remaining elements will be included in the flow. The elements that are absolutely positioned ignore this property. It can be written in a CSS file or directly specified in an element's style.

Syntax

float: none | left | right | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    img {
        float: right;
    }
</style>
</head>
<body>

<p>
    <img src="https://webtutor.dev/images/flower.jpg" alt="Flower" width="250" height="150">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. 
</p>
</body>
</html>

Preview

Property Values

Value	Description
none	The element is not floatable. This is the default setting.
left	The element appears to float to the left of its container.
right	The element is positioned to the right of its container.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
float	1.0	1.0	1.0	4.0	7.0

flex-wrap

font

CSS float Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us