{"id":182,"date":"2015-10-09T12:43:49","date_gmt":"2015-10-09T12:43:49","guid":{"rendered":"http:\/\/opiniaodetudo.com\/?p=182"},"modified":"2015-10-09T20:06:05","modified_gmt":"2015-10-09T20:06:05","slug":"entendendo-float-do-css","status":"publish","type":"post","link":"https:\/\/opiniaodetudo.com\/index.php\/2015\/10\/09\/entendendo-float-do-css\/","title":{"rendered":"Entendendo o float do CSS."},"content":{"rendered":"<p>Pessoal, uma d\u00favida constante com rela\u00e7\u00e3o ao CSS s\u00e3o relacionadas ao alinhamento de\u00a0elementos, por isso resolvi falar um pouco sobre\u00a0essa propriedade que \u00e9\u00a0extremamente necess\u00e1ria para organiza\u00e7\u00e3o dos elementos em um layout.<\/p>\n<p>Dependemos do float sempre que precisamos alinhar 2 ou mais elementos paralelamente, imagine que voc\u00ea queira dividir o seu layout em dois menus, um ao lado do outro, nesse caso voc\u00ea usaria o float com o valor left, para que os dois fiquem lado a lado, tamb\u00e9m \u00e9 poss\u00edvel alinhar dois elementos em lados opostos, um ao left e outro ao right, lembrando que tudo que for desenvolvido ser\u00e1 baseado no elemento pai do elemento ao qual voc\u00ea est\u00e1 implementando o float, para melhor compreens\u00e3o seguem dois exemplo da utiliza\u00e7\u00e3o do float.<\/p>\n<pre lang=\"CSS\" escaped=\"true\">&lt;div style=\"float:left; background-color:#060\"&gt;\r\nPrimeira\r\n&lt;\/div&gt;\r\n &lt;div style=\"float:left; background-color:#FF3\"&gt;\r\nSegunda\r\n&lt;\/div&gt;\r\n &lt;div style=\"float:left; background-color:#009\"&gt;\r\nTerceira\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>Utilizando o C\u00f3digo acima teremos: <img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"183\" data-permalink=\"https:\/\/opiniaodetudo.com\/index.php\/2015\/10\/09\/entendendo-float-do-css\/exemplo-float-left\/\" data-orig-file=\"https:\/\/opiniaodetudo.com\/wp-content\/uploads\/2015\/10\/Exemplo-float-left.jpg\" data-orig-size=\"176,27\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Exemplo float left\" data-image-description=\"\" data-medium-file=\"https:\/\/opiniaodetudo.com\/wp-content\/uploads\/2015\/10\/Exemplo-float-left.jpg\" data-large-file=\"https:\/\/opiniaodetudo.com\/wp-content\/uploads\/2015\/10\/Exemplo-float-left.jpg\" class=\"alignnone size-full wp-image-183\" src=\"https:\/\/opiniaodetudo.com\/wp-content\/uploads\/2015\/10\/Exemplo-float-left.jpg\" alt=\"Exemplo float left\" width=\"176\" height=\"27\" \/><\/p>\n<pre lang=\"CSS\" escaped=\"true\">\r\n<div style=\"width: 300px;\">\r\n<div style=\"float: left; background-color: #060;\"> Primeira<\/div>\r\n<div style=\"float: right; background-color: #ff3;\"> Segunda<\/div>\r\n<\/div>\r\n<\/pre>\n<p>Utilizando o C\u00f3digo acima teremos<img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"184\" data-permalink=\"https:\/\/opiniaodetudo.com\/index.php\/2015\/10\/09\/entendendo-float-do-css\/exemplo-float-right\/\" data-orig-file=\"https:\/\/opiniaodetudo.com\/wp-content\/uploads\/2015\/10\/Exemplo-float-Right.jpg\" data-orig-size=\"308,27\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Exemplo float Right\" data-image-description=\"\" data-medium-file=\"https:\/\/opiniaodetudo.com\/wp-content\/uploads\/2015\/10\/Exemplo-float-Right-300x26.jpg\" data-large-file=\"https:\/\/opiniaodetudo.com\/wp-content\/uploads\/2015\/10\/Exemplo-float-Right.jpg\" class=\"alignnone size-medium wp-image-184\" src=\"https:\/\/opiniaodetudo.com\/wp-content\/uploads\/2015\/10\/Exemplo-float-Right-300x26.jpg\" alt=\"Exemplo float Right\" width=\"300\" height=\"26\" srcset=\"https:\/\/opiniaodetudo.com\/wp-content\/uploads\/2015\/10\/Exemplo-float-Right-300x26.jpg 300w, https:\/\/opiniaodetudo.com\/wp-content\/uploads\/2015\/10\/Exemplo-float-Right.jpg 308w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pessoal, uma d\u00favida constante com rela\u00e7\u00e3o ao CSS s\u00e3o relacionadas ao alinhamento de\u00a0elementos, por isso resolvi falar um pouco sobre\u00a0essa propriedade que \u00e9\u00a0extremamente necess\u00e1ria para organiza\u00e7\u00e3o dos elementos em um layout. Dependemos do float sempre que precisamos alinhar 2 ou mais elementos paralelamente, imagine que voc\u00ea queira dividir o seu layout em dois menus, um [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","footnotes":"","jetpack_publicize_message":""},"categories":[19],"tags":[],"jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p6N3xn-2W","jetpack-related-posts":[{"id":605,"url":"https:\/\/opiniaodetudo.com\/index.php\/2016\/03\/10\/organizar-projetos-delphi-em-pasta\/","url_meta":{"origin":182,"position":0},"title":"Organizar Projetos Delphi em pasta","date":"mar\u00e7o 10, 2016","format":false,"excerpt":"Organizando Projeto do delphi em pastas \u00a0 A organiza\u00e7\u00e3o da estrutura de pastas e arquivos de um projeto consiste em colocar cada tipo de arquivo em pastas separadas. Assim, iremos poupar tempo na localiza\u00e7\u00e3o de arquivos, melhorar o controle de vers\u00e3o e deixar a estrutura visualmente mais elegante. Vou apresentar\u2026","rel":"","context":"Em &quot;Delphi&quot;","img":{"alt_text":"Delphi organizado","src":"https:\/\/i1.wp.com\/opiniaodetudo.com\/wp-content\/uploads\/2016\/03\/Delphi-organizado-300x207.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":754,"url":"https:\/\/opiniaodetudo.com\/index.php\/2017\/04\/06\/erro-ao-instalar-delphi-xe8-ou-outros-programas-que-necessitem-do-net-3-5\/","url_meta":{"origin":182,"position":1},"title":"Erro Ao instalar Delphi Xe8 ou outros programas que necessitem do .NET 3.5","date":"abril 6, 2017","format":false,"excerpt":"Mas uma solu\u00e7\u00e3o simples, mas que as vezes d\u00e1 um pouco de trabalho de achar na internet.. se voc\u00ea foi instalar o Delphi Xe8 ou qualquer outro da S\u00e9rie XE, ou at\u00e9 mesmo outros programas que dependam do .NET e se deparou com essa mensagem de erro: N\u00e3o se desespere\u2026","rel":"","context":"Em &quot;Delphi&quot;","img":{"alt_text":"","src":"https:\/\/i2.wp.com\/opiniaodetudo.com\/wp-content\/uploads\/2017\/04\/4.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":76,"url":"https:\/\/opiniaodetudo.com\/index.php\/2015\/09\/22\/o-que-e-importante-um-desenvolvedor-web-conhecer\/","url_meta":{"origin":182,"position":2},"title":"O Que \u00e9 importante um Desenvolvedor WEB conhecer!?!?!!","date":"setembro 22, 2015","format":false,"excerpt":"Pessoal, mais uma vez aqui hoje, gostaria de expressar a minha opini\u00e3o de alguns itens que acredito que sejam muito importantes para os desenvolvedores, ou futuros desenvolvedores WEB. Primeiramente \u00e9 importante saber que o desenvolvimento web possui uma divis\u00e3o de tarefas que s\u00e3o conhecidas como front-end e back-end ou client-side\u2026","rel":"","context":"Em &quot;Programa\u00e7\u00e3o&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":73,"url":"https:\/\/opiniaodetudo.com\/index.php\/2015\/09\/22\/preparando-o-ambiente-para-o-desenvolvimento-em-php\/","url_meta":{"origin":182,"position":3},"title":"Preparando o Ambiente para o Desenvolvimento em PHP","date":"setembro 22, 2015","format":false,"excerpt":"Tem uma galera que ainda tem um pouco de dificuldade em entender como as linguagens de programa\u00e7\u00e3o para WEB funcionam, basicamente o que eu quero que voc\u00eas entendam nesse post \u00e9 o preparo do seu computador para que voc\u00ea comece a desenvolver suas aplica\u00e7\u00f5es usando PHP. Para preparar o ambiente\u2026","rel":"","context":"Em &quot;PHP&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/opiniaodetudo.com\/wp-content\/uploads\/2015\/09\/mysql-php-logos.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1951,"url":"https:\/\/opiniaodetudo.com\/index.php\/2023\/09\/21\/5-motivos-irresistiveis-para-professores-adquirirem-o-ebook-professor-4-0\/","url_meta":{"origin":182,"position":4},"title":"5 Motivos Irresist\u00edveis para Professores Adquirirem o eBook \"Professor 4.0\"","date":"setembro 21, 2023","format":false,"excerpt":"Caro leitor, Hoje, queremos compartilhar com voc\u00ea cinco raz\u00f5es convincentes pelas quais todo professor deve considerar adquirir o eBook \"Professor 4.0 - Inovando a forma de ensinar\". Este livro \u00e9 uma fonte essencial de conhecimento e inspira\u00e7\u00e3o para educadores que desejam se destacar na era digital da educa\u00e7\u00e3o. Veja por\u2026","rel":"","context":"Em &quot;Not\u00edcias&quot;","img":{"alt_text":"","src":"https:\/\/i1.wp.com\/opiniaodetudo.com\/wp-content\/uploads\/2023\/09\/EBOOK-PROFESSOR-4-Com-Capa-Word.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":868,"url":"https:\/\/opiniaodetudo.com\/index.php\/2017\/09\/27\/problemas-ao-carregar-imagens-nos-posts-do-wordpress\/","url_meta":{"origin":182,"position":5},"title":"Problemas ao carregar imagens nos Posts do Wordpress","date":"setembro 27, 2017","format":false,"excerpt":"Hoje me deparei com dois problemas em decorr\u00eancia da utiliza\u00e7\u00e3o do plugin Jetpack no wordpress... no meu caso o plugin Jetpack \u00e9 de suma import\u00e2ncia para o bom funcionamento dos meus blogs e sites.. mas recentemente quando atualizei para a \u00faltima vers\u00e3o do JetPack o site saia fora do ar,\u2026","rel":"","context":"Em &quot;Not\u00edcias&quot;","img":{"alt_text":"","src":"https:\/\/i1.wp.com\/opiniaodetudo.com\/wp-content\/uploads\/2017\/09\/jatpack01-300x258.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/opiniaodetudo.com\/index.php\/wp-json\/wp\/v2\/posts\/182"}],"collection":[{"href":"https:\/\/opiniaodetudo.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/opiniaodetudo.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/opiniaodetudo.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/opiniaodetudo.com\/index.php\/wp-json\/wp\/v2\/comments?post=182"}],"version-history":[{"count":11,"href":"https:\/\/opiniaodetudo.com\/index.php\/wp-json\/wp\/v2\/posts\/182\/revisions"}],"predecessor-version":[{"id":195,"href":"https:\/\/opiniaodetudo.com\/index.php\/wp-json\/wp\/v2\/posts\/182\/revisions\/195"}],"wp:attachment":[{"href":"https:\/\/opiniaodetudo.com\/index.php\/wp-json\/wp\/v2\/media?parent=182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/opiniaodetudo.com\/index.php\/wp-json\/wp\/v2\/categories?post=182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/opiniaodetudo.com\/index.php\/wp-json\/wp\/v2\/tags?post=182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}