{"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’t need to add additional markup.<\/li>\n
  • It’s 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…) are essentially a box, and can contain other boxes.<\/li>\n
  • A bigger box with more content (images, text, video, etc…) will make it’s parent box expand. Unless it’s taken out of the “flow of the document”<\/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 “forgets” 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’s children boxes, then you’ll see no color at all as your parent box has essentially collapsed completely<\/li>\n
      • Give the parent element a class of “clearfix” 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’t 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’ll 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 “hack” 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
        html code<\/span> <\/div> 
        <div style="clear:both"><!-- this clears all previous floats --><\/div><\/code><\/pre> <\/div>\n[ad type=”banner”]\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 “block-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
                 
                 html code<\/span> <\/div> 
                <div class="container clearfix">    <div class="content">other content stuff...<\/div>    <div class="sidebar">Sidebar stuff...<\/div><\/div><\/code><\/pre> <\/div>\n[ad type=”banner”]\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
                   
                   html code<\/span> <\/div> 
                  \/* Assuming this HTML structure:\t<div class="clear">\t\t<div class="floated"><\/div>\t\t<div class="floated"><\/div>\t\t<div class="floated"><\/div>\t<\/div>*\/.clear:before,.clear:after {    content: " ";    display: table;}.clear:after {    clear: both;}<\/code><\/pre> <\/div>\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’t need to add additional markup. It’s 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}]}}