CSS Layout - Float and Clear

CSS layout is used to control how elements are positioned and arranged on a webpage. The "float" and "clear" properties help in organizing content, ensuring proper alignment and preventing wrapping around elements.

Float Property

The CSS float property allows elements to be positioned to the left or right of their container, allowing inline content (like text) to wrap around it. It is commonly used to create layouts, such as columns, where the text or other elements wrap around floated items.

Syntax

.element {
    float: left | right | none | inherit;
}

Value	Description
`left`	Floats the element to the left side of its container.
`right`	Floats the element to the right side of its container.
`none`	Removes the float and keeps the element in the normal flow.
`inherit`	Inherits the float property from its parent element.

1. float: left

Floats the element to the left side of its container.

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .left {
            float: left;
            width: 50px;
            height: 50px;
            background-color: lightblue;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="left">Left Float</div>
</body>
</html>
<!--Driver Code Ends-->

2. float: right

Floats the element to the right side of its container.

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .right {
            float: right;
            width: 50px;
            height: 50px;
            background-color: lightgreen;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="right">Right Float</div>
</body>
</html>
<!--Driver Code Ends-->

3. float: none

Removes the float and keeps the element in the normal flow.

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .none {
            float: none;
            width: 50px;
            height: 50px;
            background-color: lightcoral;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="none">No Float</div>
</body>
</html>
<!--Driver Code Ends-->

4. float: inherit

Inherits the float property from its parent element.

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .parent {
            float: left;
        }
        .child {
            float: inherit;
            width: 50px;
            height: 50px;
            background-color: lightyellow;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="parent">
        Parent
        <div class="child">Inherit Float</div>
    </div>
</body>
</html>
<!--Driver Code Ends-->

Clear Property

The CSS clear property controls the behavior of elements in relation to floated elements. It specifies whether an element should be placed next to or below floated elements.

Syntax

.element {
    clear: left | right | both | none | inherit;
}

Value	Description
`none`	No effect on adjacent elements, allowing them to position freely.
`left`	Forces the element below any left-floating elements.
`right`	Forces the element below any right-floating elements.
`both`	Forces the element below both left and right floating elements.
`inherit`	Inherits the `clear` property from its parent element.

1. clear: left

Prevents the element from being adjacent to left-floated elements.

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .