how does clearfix work? [duplicate]

Question

I'm cloning the home page of a website and while I was tracing and copying their codes I saw that my vertical scroll bar has doubled (when I got to the container part). I am trying to search how to get rid of this and some people said that you have to fix the height of the body to 100% or simply put overflow-y:hidden, yes it worked but my other problem now is that, some of the contents below was missing. It will just appear if the other vertical scroll bar is there and I think it has something to do with this "clearfix" thing and I still don't understand how it work. Please help me get rid of this, I'm still an intern and I still don't have an idea about css3 or whatever this is and website cloning is one of my project. Thanks!

Answer 1

The "Clearfix" hack is a collection of CSS rules applied to a parent element that forces that element to expand to encompass any child elements, including those that have been "floated".

Under normal circumstances, "floating" an element results in the parent containing element collapsing to encompass only non-floated content. The "Clearfix" hack prevents this.

See more info on clearfix: http://css-tricks.com/snippets/css/clear-fix/

...and floats: http://css-tricks.com/all-about-floats/

Answer 2

Clearfix is just used to set height of container, which would have a child element with position property set.

Position property makes the elements float on other elements in the document. So clearfix is used in these cases to that the parent's height and height is set accordingly.

Learn more about it here: http://css-tricks.com/snippets/css/clear-fix/