0

Need to know why it is used and how it helps ? Is it a good practice ?

If any example explaining would be great.

e.g : 

<div class="clear"></div>

Css : 

.clear{
    width:100%;
    height:0px;
    clear:both;
}

Appreciate your help.

Vinayak
  • 415
  • 3
  • 21
  • 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. – Praveen Kumar Purushothaman Aug 28 '15 at 09:41
  • When applied to non-floating blocks, it moves the border edge of the element down until it is below the margin edge of all relevant floats. This movement (when it happens) causes margin collapsing not to occur. – Praveen Kumar Purushothaman Aug 28 '15 at 09:41
  • When applied to floating elements, it moves the margin edge of the element below the margin edge of all relevant floats. This affects the position of later floats, since later floats cannot be positioned higher than earlier ones. – Praveen Kumar Purushothaman Aug 28 '15 at 09:41
  • OK is it like, If applied to a element It wont float to floating element and shifts down ? – Vinayak Aug 28 '15 at 09:44
  • Yes, kinda. Check the duplicate question. – Praveen Kumar Purushothaman Aug 28 '15 at 09:48
  • Let me explain it in words: when element has float left or right, it's parent lose height, and behaves like has a height of 0, clearing restores the height of parent element, so it is always as high as the highest element inside it. – Dariusz Sikorski Aug 28 '15 at 09:55
  • @DariuszSikorski I guess this is something else. In this case I use Position relative and overflow hidden to parent element. It takes the height of highest element. I get it what you wanted to say, came across this many times. – Vinayak Aug 28 '15 at 10:06

0 Answers0