{"id":764,"date":"2024-04-26T17:20:39","date_gmt":"2024-04-26T20:20:39","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=764"},"modified":"2025-11-08T09:59:11","modified_gmt":"2025-11-08T12:59:11","slug":"floating-no-css","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/floating-no-css\/","title":{"rendered":"Floating no CSS"},"content":{"rendered":"Tempo de leitura: <\/span> 3<\/span> minutos<\/span><\/span>\n

Floating no CSS<\/strong>: A propriedade float<\/code><\/strong> \u00e9 uma das ferramentas mais antigas e essenciais para a formata\u00e7\u00e3o de layouts no CSS. Seu prop\u00f3sito original era permitir que elementos de n\u00edvel de bloco flutuassem para a esquerda ou para a direita, permitindo que o conte\u00fado de linha (texto) flu\u00edsse ao redor deles, imitando o layout<\/em> de jornais e revistas.<\/p>\n\n\n\n

Embora o float<\/code> tenha sido, por muito tempo, a \u00fanica forma de criar layouts de m\u00faltiplas colunas, ele foi amplamente substitu\u00eddo por tecnologias mais robustas como Flexbox<\/strong> e Grid<\/strong>. Entender o float<\/code> \u00e9 crucial para lidar com c\u00f3digo legado e saber por que ele exige o uso de clear<\/code><\/strong>.<\/p>\n\n\n\n

<\/div>\n\n\n\n

1. O Que o float<\/code> Faz?<\/h2>\n\n\n\n

A propriedade float<\/code> retira um elemento do Fluxo de Documento<\/strong> (como position: absolute<\/code> e fixed<\/code>), mas de uma forma menos intrusiva.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Sintaxe e Comportamento<\/h3>\n\n\n\n
Valor<\/strong><\/td>Comportamento<\/strong><\/td>Efeito no Fluxo<\/strong><\/td><\/tr><\/thead>
float: left<\/code><\/strong><\/td>O elemento flutua para a esquerda.<\/td>Os elementos inline<\/code> (texto) adjacentes se enrolam (envolvem) ao redor do elemento flutuante.<\/td><\/tr>
float: right<\/code><\/strong><\/td>O elemento flutua para a direita.<\/td>O mesmo comportamento de envolvimento, mas para o lado direito.<\/td><\/tr>
float: none<\/code><\/strong><\/td>Padr\u00e3o. O elemento permanece no fluxo normal.<\/td>Sem flutua\u00e7\u00e3o.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n

Exemplo B\u00e1sico (Envolvimento de Texto)<\/h3>\n\n\n\n

CSS<\/p>\n\n\n\n

\/* Uso Original: A imagem flutua \u00e0 esquerda, e o par\u00e1grafo se alinha ao lado. *\/\n.imagem-float {\n  float: left;\n  margin-right: 15px; \/* Adiciona espa\u00e7o entre a imagem e o texto *\/\n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
2. O Desafio do float<\/code>: A Perda de Altura do Container<\/h2>\n\n\n\n
O maior problema ao usar float<\/code> para construir layouts estruturais \u00e9 que, ao retirar um elemento do fluxo normal, o elemento pai (container)<\/strong> n\u00e3o considera mais a altura dos filhos flutuantes.<\/p>\n\n\n\n
Se todos os filhos est\u00e3o flutuando, o container ter\u00e1 altura zero<\/strong>, e o conte\u00fado subsequente na p\u00e1gina subir\u00e1 e fluir\u00e1 incorretamente no lugar dos elementos flutuantes.<\/p>\n\n\n\n
<\/div>\n\n\n\n
A Solu\u00e7\u00e3o: A T\u00e9cnica Clearfix<\/h3>\n\n\n\n
A propriedade clear<\/code><\/strong> \u00e9 usada para corrigir o fluxo ap\u00f3s um float<\/code>. Ela garante que um elemento n\u00e3o suba ao lado de um elemento flutuante, for\u00e7ando-o a se posicionar abaixo<\/strong> de todos os flutuadores.<\/p>\n\n\n\n
Valor<\/strong><\/td>Fun\u00e7\u00e3o<\/strong><\/td><\/tr><\/thead>
clear: left<\/code><\/strong><\/td>Posiciona o elemento abaixo de qualquer flutuador esquerdo.<\/td><\/tr>
clear: right<\/code><\/strong><\/td>Posiciona o elemento abaixo de qualquer flutuador direito.<\/td><\/tr>
clear: both<\/code><\/strong><\/td>Posiciona o elemento abaixo de todos<\/strong> os flutuadores (mais comum).<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
A t\u00e9cnica Clearfix<\/strong> moderna usa pseudo-elementos (::after<\/code>) no container para corrigir o problema sem adicionar HTML desnecess\u00e1rio:<\/p>\n\n\n\n
CSS<\/p>\n\n\n\n
\/* T\u00e9cnica Clearfix Moderna *\/\n.container::after {\n  content: \"\"; \/* Essencial para que o pseudo-elemento exista *\/\n  display: table; \/* Garante que ele se comporte como um bloco *\/\n  clear: both; \/* For\u00e7a o elemento a limpar todos os floats *\/\n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
3. Vantagens e Desvantagens (No Contexto Atual)<\/h2>\n\n\n\n
Aspecto<\/strong><\/td>float (Avalia\u00e7\u00e3o Atual)<\/strong><\/td><\/tr><\/thead>
Vantagem<\/strong><\/td>Sintaxe simples, \u00fatil para o envolvimento cl\u00e1ssico de texto em torno de m\u00eddias.<\/td><\/tr>
Desvantagem<\/strong><\/td>Exige a complexa t\u00e9cnica Clearfix<\/strong>; dif\u00edcil para alinhamento vertical; n\u00e3o \u00e9 responsive<\/em> por natureza.<\/td><\/tr>
Recomenda\u00e7\u00e3o<\/strong><\/td>Evitar<\/strong> para layout principal de colunas; utilizar apenas para seu prop\u00f3sito original (texto ao redor de imagens).<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n
\u2705 Conclus\u00e3o Floating no CSS<\/h2>\n\n\n\n
A propriedade float<\/code> \u00e9 um artefato importante na hist\u00f3ria do CSS, que permitiu layouts de colunas na era pr\u00e9-Flexbox. Contudo, suas desvantagens (principalmente a necessidade de clear<\/code> e o tratamento n\u00e3o intuitivo da altura do container) o tornam obsoleto para a maioria das necessidades de layout estrutural. Para alinhamento e distribui\u00e7\u00e3o modernos e responsivos, a transi\u00e7\u00e3o para display: flex<\/code><\/strong> e display: grid<\/code><\/strong> \u00e9 a melhor pr\u00e1tica absoluta.<\/p>\n\n\n\n
Toda jornada tem um in\u00edcio, e o in\u00edcio para se tornar um desenvolvedor web \u00e9 dominar as seguintes tecnologias, que voc\u00ea encontra aqui mesmo:<\/p>\n\n\n\n
\n
\n
\"HTML\"<\/a>
HTML<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"CSS\"<\/a>
CSS<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"Javascript\"<\/a>
JavaScript<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
E se voc\u00ea gosta do nosso conte\u00fado, n\u00e3o deixe de contribuir adquirindo os servi\u00e7os e produtos dos nossos apoiadores e empresas que somos associados:<\/p>\n\n\n\n
\n
\n
\"Hospedagem<\/a><\/figure>\n<\/div>\n\n\n\n
\n
\"Ofertas<\/a><\/figure>\n<\/div>\n\n\n\n
\n
\"Amazon<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Tempo de leitura: <\/span>  3<\/span> minutos<\/span><\/span>Floating no CSS: A propriedade float \u00e9 uma das ferramentas mais antigas e essenciais para…<\/p>\n","protected":false},"author":1,"featured_media":702,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-764","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","wpcat-7-id"],"yoast_head":"\nFloating no CSS - BLOG THIAGO ROSSI<\/title>\n<meta name=\"description\" content=\"Floating no CSS: Neste artigo, vamos explorar em detalhes a propriedade float, suas aplica\u00e7\u00f5es, vantagens e desvantagens, e como utiliz\u00e1-la..\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thiagorossi.com.br\/blog\/floating-no-css\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Floating no CSS - BLOG THIAGO ROSSI\" \/>\n<meta property=\"og:description\" content=\"Floating no CSS: Neste artigo, vamos explorar em detalhes a propriedade float, suas aplica\u00e7\u00f5es, vantagens e desvantagens, e como utiliz\u00e1-la..\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thiagorossi.com.br\/blog\/floating-no-css\/\" \/>\n<meta property=\"og:site_name\" content=\"BLOG THIAGO ROSSI\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-26T20:20:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-08T12:59:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"758\" \/>\n\t<meta property=\"og:image:height\" content=\"426\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Thiago Rossi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thiago Rossi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/floating-no-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/floating-no-css\\\/\"},\"author\":{\"name\":\"Thiago Rossi\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\"},\"headline\":\"Floating no CSS\",\"datePublished\":\"2024-04-26T20:20:39+00:00\",\"dateModified\":\"2025-11-08T12:59:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/floating-no-css\\\/\"},\"wordCount\":539,\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/floating-no-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/floating-no-css\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/floating-no-css\\\/\",\"name\":\"Floating no CSS - BLOG THIAGO ROSSI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/floating-no-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/floating-no-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"datePublished\":\"2024-04-26T20:20:39+00:00\",\"dateModified\":\"2025-11-08T12:59:11+00:00\",\"description\":\"Floating no CSS: Neste artigo, vamos explorar em detalhes a propriedade float, suas aplica\u00e7\u00f5es, vantagens e desvantagens, e como utiliz\u00e1-la..\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/floating-no-css\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/floating-no-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/floating-no-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"width\":758,\"height\":426,\"caption\":\"CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/floating-no-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Floating no CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"name\":\"THIAGO ROSSI\",\"description\":\"Mais de 20 anos de experi\u00eancia no mercado de TI!\",\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"alternateName\":\"TR | CURSO WEB DEV\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\",\"name\":\"THIAGO ROSSI\",\"alternateName\":\"TR | CURSO WEB DEV\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"width\":300,\"height\":300,\"caption\":\"THIAGO ROSSI\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\",\"name\":\"Thiago Rossi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"caption\":\"Thiago Rossi\"},\"description\":\"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \\\"GDD \u2013 O Guia Definitivo\\\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.\",\"sameAs\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\",\"https:\\\/\\\/instagram.com\\\/thiagorossix86\",\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"],\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/author\\\/thiagorossi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Floating no CSS - BLOG THIAGO ROSSI","description":"Floating no CSS: Neste artigo, vamos explorar em detalhes a propriedade float, suas aplica\u00e7\u00f5es, vantagens e desvantagens, e como utiliz\u00e1-la..","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thiagorossi.com.br\/blog\/floating-no-css\/","og_locale":"pt_BR","og_type":"article","og_title":"Floating no CSS - BLOG THIAGO ROSSI","og_description":"Floating no CSS: Neste artigo, vamos explorar em detalhes a propriedade float, suas aplica\u00e7\u00f5es, vantagens e desvantagens, e como utiliz\u00e1-la..","og_url":"https:\/\/thiagorossi.com.br\/blog\/floating-no-css\/","og_site_name":"BLOG THIAGO ROSSI","article_published_time":"2024-04-26T20:20:39+00:00","article_modified_time":"2025-11-08T12:59:11+00:00","og_image":[{"width":758,"height":426,"url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","type":"image\/webp"}],"author":"Thiago Rossi","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Thiago Rossi","Est. tempo de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thiagorossi.com.br\/blog\/floating-no-css\/#article","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/floating-no-css\/"},"author":{"name":"Thiago Rossi","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87"},"headline":"Floating no CSS","datePublished":"2024-04-26T20:20:39+00:00","dateModified":"2025-11-08T12:59:11+00:00","mainEntityOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/floating-no-css\/"},"wordCount":539,"publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/floating-no-css\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","articleSection":["CSS"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/thiagorossi.com.br\/blog\/floating-no-css\/","url":"https:\/\/thiagorossi.com.br\/blog\/floating-no-css\/","name":"Floating no CSS - BLOG THIAGO ROSSI","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/floating-no-css\/#primaryimage"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/floating-no-css\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","datePublished":"2024-04-26T20:20:39+00:00","dateModified":"2025-11-08T12:59:11+00:00","description":"Floating no CSS: Neste artigo, vamos explorar em detalhes a propriedade float, suas aplica\u00e7\u00f5es, vantagens e desvantagens, e como utiliz\u00e1-la..","breadcrumb":{"@id":"https:\/\/thiagorossi.com.br\/blog\/floating-no-css\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thiagorossi.com.br\/blog\/floating-no-css\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/floating-no-css\/#primaryimage","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","width":758,"height":426,"caption":"CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/thiagorossi.com.br\/blog\/floating-no-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thiagorossi.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Floating no CSS"}]},{"@type":"WebSite","@id":"https:\/\/thiagorossi.com.br\/blog\/#website","url":"https:\/\/thiagorossi.com.br\/blog\/","name":"THIAGO ROSSI","description":"Mais de 20 anos de experi\u00eancia no mercado de TI!","publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"alternateName":"TR | CURSO WEB DEV","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thiagorossi.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/thiagorossi.com.br\/blog\/#organization","name":"THIAGO ROSSI","alternateName":"TR | CURSO WEB DEV","url":"https:\/\/thiagorossi.com.br\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","width":300,"height":300,"caption":"THIAGO ROSSI"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/linkedin.com\/in\/thiagox86"]},{"@type":"Person","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87","name":"Thiago Rossi","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","caption":"Thiago Rossi"},"description":"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \"GDD \u2013 O Guia Definitivo\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.","sameAs":["https:\/\/thiagorossi.com.br\/blog","https:\/\/instagram.com\/thiagorossix86","https:\/\/linkedin.com\/in\/thiagox86"],"url":"https:\/\/thiagorossi.com.br\/blog\/author\/thiagorossi\/"}]}},"_links":{"self":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/764","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/comments?post=764"}],"version-history":[{"count":1,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/764\/revisions"}],"predecessor-version":[{"id":4447,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/764\/revisions\/4447"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media\/702"}],"wp:attachment":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media?parent=764"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/categories?post=764"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/tags?post=764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}