What does the clearfix class do in css

Question

I ve seen div tags use a clearfix class when it s child divs use the float property  The clearfix class looks like this    clearfix after       clear  both      content           display  block      height  0      visibility  hidden     clearfix       display  inline-block     clearfix       display  block      I found that if I don t use clearfix when I use the bottom-border property  the border would show above the child divs  Can someone explain what the clearfix class does  Also  why are there two display properties  That seems very strange to me  I am especially curious about what the content     means   Thanks G

User · Answer

clearfix is the same as overflow hidden  Both clear floated children of the parent  but clearfix will not cut off the element which overflow to it s parent  It also works in IE8  amp  above   There is no need to define     in content  amp   clearfix  Just write like this    clr after       clear  both      content          display  block      HTML   lt div class  parent clr  gt  lt  div gt    Read these links for more  http   css-tricks com snippets css clear-fix    What methods of    clearfix    can I use

User · Answer

When an element  such as a div is floated  its parent container no longer considers its height  i e     lt div id  main  gt     lt div id  child  style  float left height 40px   gt  Hi lt  div gt   lt  div gt    The parent container will not be be 40 pixels tall by default  This causes a lot of weird little quirks if you re using these containers to structure layout    So the clearfix class that various frameworks use fixes this problem by making the parent container  acknowledge  the contained elements    Day to day  I normally just use frameworks such as 960gs  Twitter Bootstrap for laying out and not bothering with the exact mechanics   Can read more here  http   www webtoolkit info css-clearfix html

User · Answer

How floats work  When floating elements exist on the page  non-floating elements wrap around the floating elements  similar to how text goes around a picture in a newspaper  From a document perspective  the original purpose of HTML   this is how floats work   float vs display inline  Before the invention of display inline-block  websites use float to set elements beside each other  float is preferred over display inline since with the latter  you can t set the element s dimensions  width and height  as well as vertical paddings  top and bottom  - which floated elements can do since they re treated as block elements   Float problems  The main problem is that we re using float against its intended purpose   Another is that while float allows side-by-side block-level elements  floats do not impart shape to its container  It s like position absolute  where the element is  taken out of the layout   For instance  when an empty container contains a floating 100px x 100px  lt div gt   the  lt div gt  will not impart 100px in height to the container   Unlike position absolute  it affects the content that surrounds it  Content after the floated element will  wrap  around the element  It starts by rendering beside it and then below it  like how newspaper text would flow around an image   Clearfix to the rescue  What clearfix does is to force content after the floats or the container containing the floats to render below it  There are a lot of versions for clear-fix  but it got its name from the version that s commonly being used - the one that uses the CSS property clear   Examples  Here are several ways to do clearfix   depending on the browser and use case  One only needs to know how to use the clear property in CSS and how floats render in each browser in order to achieve a perfect cross-browser clear-fix   What you have  Your provided style is a form of clearfix with backwards compatibility  I found an article about this clearfix  It turns out  it s an OLD clearfix - still catering the old browsers  There is a newer  cleaner version of it in the article also  Here s the breakdown    The first clearfix you have appends an invisible pseudo-element  which is styled clear both  between the target element and the next element  This forces the pseudo-element to render below the target  and the next element below the pseudo-element  The second one appends the style display inline-block which is not supported by earlier browsers  inline-block is like inline but gives you some properties that block elements  like width  height as well as vertical padding  This was targeted for IE-MAC  This was the reapplication of display block due to IE-MAC rule above  This rule was  hidden  from IE-MAC    All in all  these 3 rules keep the  clearfix working cross-browser  with old browsers in mind

[html] What does the clearfix class do in css?

The answer is

Examples related to html

Examples related to css

Examples related to clearfix

Tags