CSS Float

The CSS float property is used to position an element to the left or right of its container, allowing other content to wrap around it. It is commonly used for layout purposes, such as wrapping text around images.

Understanding the Float Property

The float property can take the following values:

• left: Floats the element to the left of its container, allowing other content to wrap around its right side.
• right: Floats the element to the right of its container, allowing other content to wrap around its left side.
• none: The default value. The element does not float and will be displayed in the normal flow of the document.
• inherit: Inherits the float value from its parent element.

Syntax

The syntax for the CSS float property is:

/* Float Property Syntax */
selector {
    float: ;
}

        

Examples

/* Float Left */
.float-left {
    float: left;
    width: 150px;
    margin-right: 10px;
    background: #f0f0f0;
}

            

/* Float Right */
.float-right {
    float: right;
    width: 150px;
    margin-left: 10px;
    background: #f0f0f0;
}

            

/* Clear Floats */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}