{"id":718,"date":"2017-03-18T12:48:15","date_gmt":"2017-03-18T07:18:15","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=718"},"modified":"2017-03-29T15:14:48","modified_gmt":"2017-03-29T09:44:48","slug":"what-is-a-clearfix","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/what-is-a-clearfix\/","title":{"rendered":"What is a clearfix"},"content":{"rendered":"

Defining the Clearfix<\/span> <\/strong><\/h4>\n

Clearfix:<\/strong><\/p>\n

    \n
  • A\u00a0clearfix\u00a0is a way for an element to automatically clear its child elements, so that you don\u2019t need to add additional markup.<\/li>\n
  • It\u2019s generally used in float layouts where elements are floated to be stacked horizontally.<\/li>\n
  • The\u00a0clearfix\u00a0is a way to combat the zero-height container problem for floated elements<\/li>\n
  • \u00a0All HTML elements (div, p, ul, li, a, etc\u2026) are essentially a box, and can contain other boxes.<\/li>\n
  • A bigger box with more content (images, text, video, etc\u2026) will make it\u2019s parent box expand. Unless it\u2019s taken out of the \u201cflow of the document\u201d<\/li>\n<\/ul>\n

    Explanation of CSS clearfix :<\/strong><\/span><\/h4>\n
      \n
    • Only two CSS declarations do that.\n
        \n
      • position:absolute\/fixed<\/li>\n
      • float:left\/right.<\/li>\n<\/ul>\n<\/li>\n
      • The parent essentially \u201cforgets\u201d that it contains children boxes and shrinks to only take up as much space as it needs.<\/li>\n
      • If you assign the parent box a background color and float or absolutely position all it\u2019s children boxes, then you\u2019ll see no color at all as your parent box has essentially collapsed completely<\/li>\n
      • Give the parent element a class of \u201cclearfix\u201d after having put the amazing clearfix CSS code in your stylesheet.<\/li>\n
      • Give the parent element a width of anything & overflow:hidden.<\/li>\n
      • That strive to keep presentation in CSS & content in HTML.<\/li>\n
      • However, this won\u2019t work if it contains something like a drop down menu as the overflow:hidden would hide the drop down.<\/li>\n
      • Float the parent too<\/li>\n
      • You\u2019ll have to deal with a clear:both at some point, but you can keep passing it on by keep floating a parent till you get to a point when you can clear it all.<\/li>\n
      • Clearfix is a \u201chack\u201d used to contain\/enclose floats without structural markup.<\/li>\n
      • In short, it is a sophisticated\/elegant way to do the same thing as this:<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cdiv%20style%3D%22clear%3Aboth%22%3E%3C!\u2013%20this%20clears%20all%20previous%20floats%20\u2013%3E%3C%2Fdiv%3E%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n
          \n
        • but without including that markup in the document.<\/li>\n
        • The magic relies in the use of ::after<\/strong> (a pseudo-element)<\/li>\n
        • clearfix uses ::after<\/strong> to generate content (via the content property), then style that content to clear previous floats.<\/li>\n
        • Because this method does not work in IE (< 8) clearfix relies on haslayout .<\/li>\n
        • To make IE behave (giving a layout to a box assures that it will contain floats).<\/li>\n
        • Unfortunately, doing so creates very different constructs across browsers (see also new \u201cblock-formatting context<\/strong>\u201c).<\/li>\n<\/ul>\n

          Clearfix will be responsible for:<\/strong><\/span><\/h4>\n
            \n
              \n
            • creating<\/strong> different margin boxes<\/li>\n
            • collapsing<\/strong> margins differently across browsers<\/li>\n
            • clearing<\/strong> floats differently across browsers (not children, but siblings)<\/li>\n<\/ul>\n
            • Clearfix is actually used to fix the issue when a parent div or block element contains floating children.<\/li>\n
            • Without clearfix the browser will not take into account the height of floated children when displaying the parent.<\/li>\n
            • So as an example, if you had a parent block with a background color that contained a floated child, the parent block would appear to stop behind the child or even above it.<\/li>\n
            • Adding the clearfix class to the parent ensures that the parent completely wraps the floated children.<\/li>\n<\/ul>\n

              How to use a Clearfix?<\/strong><\/span><\/p>\n

                \n
              • When applying classes to your HTML elements you should be mindful of which elements require a clearfix.<\/span><\/li>\n
              • Any HTML element will have floated child elements will require a clearfix.<\/span><\/li>\n
              • You can do this by adding the class clearfix to your existing classes ( assuming you have access to editing those classes).<\/span><\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cdiv%20class%3D%22container%20clearfix%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22content%22%3Eother%20content%20stuff\u2026%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20class%3D%22sidebar%22%3ESidebar%20stuff\u2026%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n
                  \n
                • HTML classes can accept more than one class by separating them with a space. That means the container will accept CSS rules from both\u00a0.container\u00a0and\u00a0.clearfix<\/li>\n<\/ul>\n

                  CSS :<\/strong><\/p>\n

                  This excellent CSS clear fix uses\u00a0:before\u00a0<\/strong>and\u00a0:after<\/strong>\u00a0pseudo-elements of the container to perform the clear:<\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%2F*%20Assuming%20this%20HTML%20structure%3A%0A%0A%09%3Cdiv%20class%3D%22clear%22%3E%0A%09%09%3Cdiv%20class%3D%22floated%22%3E%3C%2Fdiv%3E%0A%09%09%3Cdiv%20class%3D%22floated%22%3E%3C%2Fdiv%3E%0A%09%09%3Cdiv%20class%3D%22floated%22%3E%3C%2Fdiv%3E%0A%09%3C%2Fdiv%3E*%2F%0A.clear%3Abefore%2C%0A.clear%3Aafter%20%0A%7B%0A%20%20%20%20content%3A%20%22%20%22%3B%0A%20%20%20%20display%3A%20table%3B%0A%7D%0A%0A.clear%3Aafter%20%0A%7B%0A%20%20%20%20clear%3A%20both%3B%0A%7D%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n","protected":false},"excerpt":{"rendered":"

                  Defining the Clearfix Clearfix: A\u00a0clearfix\u00a0is a way for an element to automatically clear its child elements, so that you don\u2019t need to add additional markup. It\u2019s generally used in float layouts where elements are floated to be stacked horizontally. The\u00a0clearfix\u00a0is a way to combat the zero-height container problem for floated elements \u00a0All HTML elements (div, […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,24],"tags":[1258,1263,1264,1267,1269,1268,1259,1256,1261,1265,1270,1254,1266,1255,1262,1260,1257],"class_list":["post-718","post","type-post","status-publish","format-standard","hentry","category-css","category-html","tag-clearfix","tag-clearfix-bootstrap","tag-clearfix-css-w3schools","tag-clearfix-float","tag-clearfix-mixin","tag-clearfix-not-working","tag-clearing-floats-an-overview-of-different-clearfix-methods","tag-css-the-clearfix-hack","tag-css-clear-fix","tag-css-clearfix-2016","tag-how-to-use-clearfix","tag-html-what-is-a-clearfix","tag-micro-clearfix","tag-the-clearfix-force-an-element-to-self-clear-its-children","tag-the-very-latest-clearfix-reloaded","tag-understanding-the-humble-clearfix","tag-when-and-how-to-use-a-clearfix"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/718","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=718"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/718\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=718"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}