float: right; CSS property
The float: right; CSS property positions an element on the right side of its container, allowing content to flow around its left side.
Example: In this example we uses the float: right; CSS property within an inline style to position the “w3wiki” text on the right side of its container with a green color and large font size.
<!DOCTYPE html>
<html>
<head>
<title>Float</title>
</head>
<body>
<div class="GFG"
style="font-size:40px;
color:#006400;
float:right;">
w3wiki
</div>
</body>
</html>
Output:
CSS Float
The CSS float property positions an element to the left or right within its container, allowing other elements to wrap around it. It’s commonly used for layouts where content should flow around images or blocks, creating responsive and dynamic designs.
Syntax:
float: none|left|right|initial|inherit;
Property values:
Value | Description |
---|---|
none | Default value; the element does not float. |
left | Element floats on the left side of the container, allowing content to flow around its right side. |
right | Element floats on the right side of the container, allowing content to flow around its left side. |
initial | Element is set to its default value. |
inherit | Element inherits the floating property from its parent element. |
We will use the above property values & understand their usage through the example.
Table of Content
- float: left; CSS property
- float: right; CSS property
- float: none; CSS property
- float: inherit; CSS property