{"id":333,"date":"2016-10-12T16:15:24","date_gmt":"2016-10-12T19:15:24","guid":{"rendered":"https:\/\/www.origamid.com\/codex\/?p=333"},"modified":"2016-10-12T17:57:57","modified_gmt":"2016-10-12T20:57:57","slug":"para-que-serve-o-clearfix","status":"publish","type":"post","link":"https:\/\/www.origamid.com\/codex\/para-que-serve-o-clearfix\/","title":{"rendered":"Para que serve o Clearfix"},"content":{"rendered":"<img decoding=\"async\" src=\"https:\/\/www.origamid.com\/codex\/wp-content\/uploads\/2016\/10\/clearfix.png\" alt=\"Para que serve o Clearfix\" \/>\n<p>No primeiro momento que voc\u00ea aprende a criar um layout com CSS, o float \u00e9 apresentado e logo em seguida o famoso clearfix.<\/p>\n<p>Incialmente voc\u00ea coloca o clearfix e nem se pergunta o motivo de se utilizar ele, \u00e9 algo que simplesmente funciona e voc\u00ea j\u00e1 tem muita coisa nova para se preocupar.<\/p>\n<p>Mas para mim a parte mais interessante do aprendizado \u00e9 quando ap\u00f3s anos de pr\u00e1tica, pegamos um livro sobre o assunto e todo o conte\u00fado passa a fazer mais sentido do que nunca.<\/p>\n<p>N\u00e3o \u00e9 atoa que um dos meus pensamentos favoritos \u00e9 este:<\/p>\n<p>&#8220;N\u00e3o devemos parar de explorar, e o fim de toda nossa explora\u00e7\u00e3o ser\u00e1 chegar ao ponto de partida e conhecer o lugar pela primeira vez.&#8221; \u2014 Thomas Stearns Eliot<\/p>\n<p data-height=\"300\" data-theme-id=\"24256\" data-slug-hash=\"wzXJWB\" data-default-tab=\"css,result\" data-user=\"origamid\" data-embed-version=\"2\" data-editable=\"true\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/origamid\/pen\/wzXJWB\/\">clearfix<\/a> by Andr\u00e9 | Origamid (<a href=\"http:\/\/codepen.io\/origamid\">@origamid<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"\/\/assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Bom agora vamos falar sobre o clearfix. Este \u00e9 um dos c\u00f3digos mais atuais (Micro Clearfix de Nicolas Gallagher, com algumas modifica\u00e7\u00f5es):<\/p>\n<pre><code class=\"language-css\">\n.clearfix::before, .clearfix::after {\n  content: ' ';\n  display: table;\n}\n.clearfix::after\n clear: both;\n}\n\n<\/code><\/pre>\n<p>Vamos aos pontos do clearfix:<\/p>\n<p>1 &#8211; Onde devemos colocar o mesmo?<\/p>\n<p>Este c\u00f3digo deve ser colocado em elementos que possuem filhos com float. Geralmente voc\u00ea encontra ele em tags que funcionam como containers. Ent\u00e3o um container que possui 3 blocos de texto com float, que comp\u00f5e um layout de 3 colunas, deve possuir o clearfix.<\/p>\n<p>2 &#8211; Qual a necessidade dele?<\/p>\n<p>Meu primeiro conselho \u00e9 que voc\u00ea abra um documento novo e teste, crie 3 div&#8217;s iguais, coloque um float nelas e adicione uma tag como container. Se voc\u00ea adicionar uma cor de background ao container, ver\u00e1 que nada vai acontecer. Se o \u00fanico conte\u00fado dele forem as div&#8217;s, ele ter\u00e1 inicialmente 0px de height.<\/p>\n<p>Isso acontece porque os elementos com float possuem as suas caracter\u00edsticas ignoradas pelo elemento pai (container). Ele vai ignorar a altura e o conte\u00fado dessas div&#8217;s, por isso o seu height ser\u00e1 de 0px, j\u00e1 que teoricamente n\u00e3o existe nada dentro do container.<\/p>\n<p>\u00c9 por isso que precisamos do clearfix. Ele vai injetar conte\u00fado ap\u00f3s os elementos com float e &#8220;limpar&#8221; a flutua\u00e7\u00e3o. Com isso o elemento pai passa a ter uma altura de acordo com os elementos filhos.<\/p>\n<p>Fa\u00e7a um teste, sem utilizar o clearfix, adicione um simples &lt;p&gt;Teste&lt;\/p&gt; ap\u00f3s as div&#8217;s com float e coloque .p { clear: both; } no CSS. Voc\u00ea ver\u00e1 que ir\u00e1 funcionar da mesma forma que o clearfix.<\/p>\n<p>3 &#8211; Como o c\u00f3digo funciona?<\/p>\n<p>Como eu disse, ele injeta um elemento com clear: both. Esse elemento \u00e9 criado utilizado os pseudo-elements before e after. Criamos os elementos sem conte\u00fado algum, por\u00e9m \u00e9 necess\u00e1rio o content: &#8216; &#8216;; (o espa\u00e7o entre aspas \u00e9 para funcionar no Opera). E devemos definir que tipo de elemento ele \u00e9, o tipo que se mostrou mais consistente entre os browsers foi o display: table;<\/p>\n<p>Se voc\u00ea colocar display: block; ver\u00e1 que o margin-top em rela\u00e7\u00e3o as div&#8217;s e o topo do container, ser\u00e3o ignoradas e ir\u00e3o ultrapassar o container. Por isso usamos o table.<\/p>\n<p>O clear: both apenas no after \u00e9 o que vai realmente limpar o float, o c\u00f3digo anterior serviu apenas para a cria\u00e7\u00e3o destes elementos &#8220;invis\u00edveis&#8221;.<\/p>\n<p>Existem pessoas que criam uma classe clearfix a parte e utilizam ela quando quiser, eu geralmente coloco o c\u00f3digo necess\u00e1rio para o clearfix direto na minha classe de container, pois 99% das vezes \u00e9 nela que eu quero limpar o float.<\/p>\n<p>\u00cdcone: Broom by Nikita Kozin from the Noun Project<\/p>\n","protected":false},"excerpt":{"rendered":"<p>No primeiro momento que voc\u00ea aprende a criar um layout com CSS, o float \u00e9 apresentado e logo em seguida o famoso clearfix. Incialmente voc\u00ea coloca o clearfix e nem se pergunta o motivo de se utilizar ele, \u00e9 algo que simplesmente funciona e voc\u00ea j\u00e1 tem muita coisa nova para se preocupar. Mas para [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/333"}],"collection":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/comments?post=333"}],"version-history":[{"count":9,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/333\/revisions"}],"predecessor-version":[{"id":343,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/333\/revisions\/343"}],"wp:attachment":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/media?parent=333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/categories?post=333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/tags?post=333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}