In css what is the use for clear:both ?

Question

Am new to css.I know only basics in css. I wonder what is the use clear:both.Please give some sample code for what is the use for this.

Answer 1

Lets first understand the meaning of clear before coming to both

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. The clear property applies to both floating and non-floating elements.

Possible Values of clear:
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;
clear: inherit;

Now lets understand the meaning of both, both means "No floating elements allowed on the left or the right side of a specified <p> element":

Run the following sample code

.wrapper{
    border:1px solid black;
    padding:10px;
}
.both {
    border: 1px solid black;
    clear: both;
}
.black {
    float: left;
    margin: 0;
    background-color: black;
    color: #fff;
    width:20%;
}
.red {
    float: right;
    margin: 0;
    background-color: red;
    width:20%;
}
p {
    width: 45%;
}

<div class="wrapper">

    <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p>

    <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>

    <p class="both">This paragraph clears both.</p>

</div>

Answer 2

Clear:both means No floating elements allowed on the left or the right side of a specified.

See more information about clear property here - https://developer.mozilla.org/en-US/docs/Web/CSS/clear