top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

In css what is the use for clear:both ?

+2 votes
597 views

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.

posted Oct 8, 2014 by anonymous

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

2 Answers

+1 vote

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 Mar 10, 2016 by Ashish Kumar Khanna
0 votes

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

answer Oct 9, 2014 by Ujjwal Mehra
...