{"id":4050,"date":"2019-08-07T10:45:30","date_gmt":"2019-08-07T10:45:30","guid":{"rendered":"https:\/\/www.homehost.com.br\/blog\/?p=4050"},"modified":"2024-01-13T06:56:11","modified_gmt":"2024-01-13T09:56:11","slug":"html-div","status":"publish","type":"post","link":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/","title":{"rendered":"HTML Div: o elemento de divis\u00e3o do HTML"},"content":{"rendered":"\n<p>A <strong>HTML Div<\/strong> \u00e9 um dos elementos mais conhecidos do <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/\">HTML<\/a>. At\u00e9 o lan\u00e7amento do HTML5, era muito utilizado para dividir todas sess\u00f5es e todos os blocos do documento. Por\u00e9m, com a atualiza\u00e7\u00e3o da <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/\">vers\u00e3o 5 do HTML<\/a>, come\u00e7ou a dividir o espa\u00e7o com as demais tags sem\u00e2nticas. Ainda assim, \u00e9 um elemento muito importante e muito utilizado. Neste artigo vamos explicar sobre a HTML Div, como funciona, como utilizar e muito mais.<\/p>\n\n\n\n<p><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_72 ez-toc-wrap-center counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Conte\u00fado<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/#Para_que_serve_uma_Div_no_HTML\" title=\"Para que serve uma Div no HTML\">Para que serve uma Div no HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/#Como_utilizar_a_HTML_Div_a_tag\" title=\"Como utilizar a HTML Div: a tag &lt;div&gt;\">Como utilizar a HTML Div: a tag &lt;div&gt;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/#Atributos_da_Div_HTML\" title=\"Atributos da Div HTML\">Atributos da Div HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/#Alterando_a_cor_de_fundobackground_da_HTML_Div\" title=\"Alterando a cor de fundo\/background da HTML Div\">Alterando a cor de fundo\/background da HTML Div<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/#ID_e_classe\" title=\"ID e classe\">ID e classe<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/#A_diferenca_entre_Div_e_Span\" title=\"A diferen\u00e7a entre Div e Span\">A diferen\u00e7a entre Div e Span<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/#Posicionamento_de_HTML_Div\" title=\"Posicionamento de HTML Div\">Posicionamento de HTML Div<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/#CSS_Postition\" title=\"CSS Postition\">CSS Postition<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/#CSS_margin\" title=\"CSS margin\">CSS margin<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/#CSS_float\" title=\"CSS float\">CSS float<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/#Conclusao_sobre_HTML_Div\" title=\"Conclus\u00e3o sobre HTML Div\">Conclus\u00e3o sobre HTML Div<\/a><\/li><\/ul><\/nav><\/div>\n<a name=\"top01\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Para_que_serve_uma_Div_no_HTML\"><\/span>Para que serve uma Div no HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>O elemento <strong>HTML Div<\/strong> define uma divis\u00e3o ou se\u00e7\u00e3o em um documento HTML. O elemento <strong>div<\/strong> \u00e9 frequentemente usado como um cont\u00eainer para outros elementos, o que facilita na estiliza\u00e7\u00e3o de blocos. Tamb\u00e9m \u00e9 muito \u00fatil para inclus\u00e3o de intera\u00e7\u00f5es com Scripts (JavaScript). Portanto, ele \u00e9 definido com um cont\u00eainer gen\u00e9rico para conte\u00fado de fluxo.<\/p>\n\n\n\n<p>Diante disso, a HTML Div \u00e9 muito utilizada quando precisamos agrupar elementos sem a necessidade do uso de um elemento sem\u00e2ntico do HTML5. Isso acontece, pois o elemento div n\u00e3o possui um valor sem\u00e2ntico. Portanto, n\u00e3o representa nada para o navegador e para os <a href=\"https:\/\/www.homehost.com.br\/blog\/seo\/seo-marketing-20-dicas-subir-no-google\/\" target=\"_blank\" rel=\"noopener noreferrer\">mecanismos de buscas<\/a>.<\/p>\n\n\n\n<p>Como \u00e9 muito utilizado para agrupar elementos, acaba sendo um facilitador para organizar informa\u00e7\u00f5es em um layout. Dessa forma, \u00e9 poss\u00edvel formatar e manipular os elementos, inclusive a pr\u00f3pria div, atrav\u00e9s do CSS de uma forma organizada. Geralmente \u00e9 acompanha de atributos de ID e classe, para poder facilitar essa organiza\u00e7\u00e3o e formata\u00e7\u00e3o.<br><a name=\"top02\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_utilizar_a_HTML_Div_a_tag\"><\/span>Como utilizar a HTML Div: a tag &lt;div&gt;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Agora que j\u00e1 conhecemos a defini\u00e7\u00e3o do elemento de divis\u00e3o do HTML, vamos aprender como utiliz\u00e1-la.<\/p>\n\n\n\n<p>A sintaxe do elemento HTML Div \u00e9 atrav\u00e9s da <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tags-html\/\">tag<\/a> de abertura <strong>&lt;div><\/strong> e de fechamento <strong>&lt;\/div><\/strong>. Por padr\u00e3o, a div gera uma line-break (<a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/quebra-de-linha-html\/\">quebra de linha<\/a>) autom\u00e1tica ao ser utilizada. Isso ocorre, pois possui como display padr\u00e3o um elemento de bloco, ou seja, display <strong>block<\/strong>. Portanto, para utilizar a div, basta colocar os elementos que quiser dentro da tag <strong>&lt;div>&lt;\/div>\u00a0<\/strong>como na sintaxe abaixo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div&gt;\n    ...\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Dessa forma, vamos utilizar algumas divis\u00f5es para poder separar os par\u00e1grafos no nosso exemplo abaixo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div&gt;\n    &lt;p&gt;Divis\u00e3o 01&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;div&gt;\n    &lt;p&gt;Divis\u00e3o 02&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;div&gt;\n    &lt;p&gt;Divis\u00e3o 03&lt;\/p&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Claro que podemos incluir qualquer outro elemento HTML, ou seja, outras tags, dentro de uma div HTML.<br><a name=\"top03\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Atributos_da_Div_HTML\"><\/span>Atributos da Div HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>O Elemento HTML Div costuma ter entre seus principais atributos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>id &#8211;&nbsp;<\/strong>Define uma ID;<\/li>\n\n\n\n<li><strong>class &#8211;&nbsp;<\/strong>Define uma classe;<\/li>\n\n\n\n<li><strong>title &#8211;&nbsp;<\/strong>Define um t\u00edtulo;<\/li>\n\n\n\n<li><strong>height &#8211;&nbsp;<\/strong>Define uma altura;<\/li>\n\n\n\n<li><strong>width &#8211;&nbsp;<\/strong>Define uma largura.<\/li>\n<\/ul>\n\n\n\n<p>Por\u00e9m, com exce\u00e7\u00e3o do ID, da class e do title, todos os demais atributos j\u00e1 s\u00e3o considerados depreciados. Portanto, dessa forma, podemos definir a altura, a largura e a cor de fundo atrav\u00e9s do pr\u00f3prio <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/estilos-html\/\">estilo<\/a> CSS, assim como diversas outras caracter\u00edsticas.<\/p>\n\n\n\n<p>O HTML Div tamb\u00e9m suporta receber todos os <a href=\"https:\/\/www.w3schools.com\/tags\/ref_standardattributes.asp\" target=\"_blank\" rel=\"noopener noreferrer\">atributos globais<\/a>, assim como tamb\u00e9m os <a href=\"https:\/\/www.w3schools.com\/tags\/ref_eventattributes.asp\" target=\"_blank\" rel=\"noopener noreferrer\">atributos eventuais<\/a>.<br><a name=\"top04\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Alterando_a_cor_de_fundobackground_da_HTML_Div\"><\/span>Alterando a cor de fundo\/background da HTML Div<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Antes da vers\u00e3o 5 do HTML era poss\u00edvel utilizar o atributo <strong>bgcolor<\/strong> para poder escolher uma cor de background para a div. Por\u00e9m, a partir da vers\u00e3o 5, o HTML passou a n\u00e3o ter mais suporte a este atributo.<\/p>\n\n\n\n<p>Portanto, para poder alterar a cor de fundo de uma div, devemos estilizar atrav\u00e9s do CSS. Para poder modificar a cor de fundo, basta utilizar a propriedade background ou background-color do CSS. Podemos utilizar o estilo inline, atrav\u00e9s do atributo <strong>style=&#8221;&#8230;&#8221;<\/strong>, atrav\u00e9s do <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-css\/\">CSS <\/a>dentro das tags <strong>&lt;style&gt;<\/strong> ou ainda atrav\u00e9s de um folha de estilo externa.<\/p>\n\n\n\n<p>Para utilizar a propriedade do background ou background-color, basta declarar um valor da cor. Para isso, pode ser utilizado um c\u00f3digo hexadecimal de cores, o nome da cor, ou ainda declarar as cores atrav\u00e9s do c\u00f3digo <strong>rgb<\/strong>, <strong>rgba<\/strong> ou <strong>hsl<\/strong>. Portando, vejamos ent\u00e3o abaixo as diversas formas de declarar uma cor de fundo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    &lt;div style=\"background-color: red\"&gt;&lt;\/div&gt;   \n\n    &lt;div style=\"background-color: #FF0000\"&gt;&lt;\/div&gt;\n\n    &lt;div style=\"background-color: rgb(255,0,0);\"&gt;&lt;\/div&gt;\n\n    &lt;div style=\"background: red\"&gt;&lt;\/div&gt;\n\n    &lt;div style=\"background: #FF0000\"&gt;&lt;\/div&gt;\n\n    &lt;div style=\"background: rgb(255,0,0);\"&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Independente de qual dos c\u00f3digos acima for utilizado, o resultado ser\u00e1 o mesmo, uma div contendo um fundo na cor vermelha.<\/p>\n\n\n\n<p>Vejamos ent\u00e3o outro exemplo, agora utilizando a tag <strong>&lt;style&gt;<\/strong> para declarar o CSS. Vamos estilizar todas as divs com uma altura de 50px e largura de 100px. Posteriormente, iremos definir uma cor para cada classe, de maneiras diferentes (nome da cor, c\u00f3digo hexadecimal, valor RGB). Por fim, vamos incluir no documento tr\u00eas elementos HTML Div, cada um com uma classe:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;title&gt;Cores de fundo em HTML Div&lt;\/title&gt;\n    &lt;style type=\"text\/css\"&gt;\n        div{\n            width: 100px;\n            height: 50px;\n        }\n        .azul{\n            background-color: blue;\n        }\n        .vermelho{\n            background: #FF0000;\n        }\n        .verde{\n            background: rgb(0,255,0);\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=\"azul\"&gt;&lt;\/div&gt;   \n\n    &lt;div class=\"vermelho\"&gt;&lt;\/div&gt;\n\n    &lt;div class=\"verde\"&gt;&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Com este exemplo, o resultado ser\u00e1 conforme a imagem abaixo:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-04.jpg\" alt=\"Utilizando cores de fundo em divs\" class=\"wp-image-4057\" width=\"136\" height=\"197\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-04.jpg 136w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-04-1x1.jpg 1w\" sizes=\"(max-width: 136px) 100vw, 136px\" \/><\/figure>\n\n\n\n<p>Voc\u00ea pode utilizar uma <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">tabela de cores HTML<\/a> para poder experimentar mais a respeito.<br><a name=\"top05\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"ID_e_classe\"><\/span>ID e classe<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Conforme explicado anteriormente, o HTML Div comporta receber os atributos ID e Class. Ou seja, \u00e9 poss\u00edvel atribuir a uma div um ID \u00fanico ou uma ou mais classes. Isso nos permite formatar um ou mais elementos de forma mais espec\u00edfica e facilitada.<\/p>\n\n\n\n<p>Um ID \u00e9 uma configura\u00e7\u00e3o \u00fanica, ou seja, s\u00f3 podemos utilizar um ID em apenas um \u00fanico elemento. J\u00e1 uma classe \u00e9 uma configura\u00e7\u00e3o que pode ser utilizada em mais de um elemento. Portanto, vejamos o exemplo abaixo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"cabecalho\"&gt;\n    &lt;h2&gt;Meu documento sobre Div HTML&lt;\/h2&gt;\n&lt;\/div&gt;\n&lt;div id=\"corpo\"&gt;\n    &lt;div class=\"sessao_conteudo\"&gt;\n        &lt;h3&gt;Meu conte\u00fado 01&lt;\/h3&gt;\n        &lt;p&gt;Meu paragrafo contendo texto&lt;\/p&gt;\n        &lt;p&gt;Meu paragrafo contendo texto&lt;\/p&gt;\n    &lt;\/div&gt;\n    &lt;div class=\"sessao_conteudo\"&gt;\n        &lt;h3&gt;Meu conte\u00fado 02&lt;\/h3&gt;\n        &lt;p&gt;Meu paragrafo contendo texto&lt;\/p&gt;\n        &lt;p&gt;Meu paragrafo contendo texto&lt;\/p&gt;\n    &lt;\/div&gt;    \n&lt;\/div&gt;\n&lt;div id=\"rodape\"&gt;\n    &lt;p&gt;Todos os direitos reservados&lt;\/p&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Observe que nosso documento HTML foi dividido com tr\u00eas divs pais, cada uma contendo um ID \u00fanica (<strong>cabecalho<\/strong>, <strong>corpo<\/strong> e <strong>rodape<\/strong>). Dentro da nossa div com a id <strong>corpo<\/strong>, recebemos duas divis\u00f5es para o conte\u00fado. Observe que essas divis\u00f5es receberam uma mesma classe: <strong>sessao_conteudo<\/strong>. Portanto, podemos estilizar as divs atrav\u00e9s de suas ids, e ainda podemos estilizar todas as divs que cont\u00eam a mesma classe de uma s\u00f3 vez. Para IDs, referenciamos no CSS atrav\u00e9s do &#8220;#&#8221;, por exemplo: <strong>#cabecalho<\/strong>. J\u00e1 para classes, reconhecemos atrav\u00e9s de um &#8220;.&#8221;, ou seja, conforme este exemplo: &#8220;<strong>.sessao_conteudo<\/strong>&#8220;.<\/p>\n\n\n\n<p>Vejamos ent\u00e3o o seguinte exemplo de estilo CSS para o documento apresentado no exemplo anterior:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n    #cabecalho{\n        background-color: #cccccc;\n        width: 600px;\n        padding: 40px 2%;\n        color: white;\n        text-align: center;\n    }\n    #corpo{\n        background-color: red;\n        width: 600px;\n        padding: 10px 2%;\n    }\n    #rodape{\n        width: 600px;\n        padding: 10px 2%;\n        background-color: #888888;\n        color: white;\n        text-align: center;\n    }\n\n    .sessao_conteudo{\n        text-align: center;\n        width: 100%;\n        background-color: green;\n    }\n&lt;\/style&gt;<\/code><\/pre>\n\n\n\n<p>Observe ent\u00e3o o resultado conforme a imagem abaixo:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-01.jpg\" alt=\"Div HTML exemplo 01\" class=\"wp-image-4054\" width=\"828\" height=\"597\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-01.jpg 828w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-01-300x216.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-01-768x554.jpg 768w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-01-1x1.jpg 1w\" sizes=\"(max-width: 828px) 100vw, 828px\" \/><\/figure>\n\n\n\n<p>Observe que cada ID recebeu um estilo diferente. Observe tamb\u00e9m que ambas as divs que cont\u00eam a classe <strong>.sessao_conteudo&nbsp;<\/strong>receberam o mesmo estilo.<br><a name=\"top06\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"A_diferenca_entre_Div_e_Span\"><\/span>A diferen\u00e7a entre Div e Span<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Uma d\u00favida muito comum para quem est\u00e1 aprendendo o HTML \u00e9 a diferen\u00e7a entre as tags <strong>&lt;div&gt;<\/strong> e <strong>&lt;span&gt;<\/strong>. Ambas as tags representam elementos sem valor sem\u00e2ntico e que podem conter outros elementos. Por\u00e9m, geralmente um <strong>&lt;span&gt;<\/strong> costuma conter um texto dentro dele. Ainda assim, a principal diferen\u00e7a entre elas \u00e9 que enquanto a <strong>&lt;div&gt;<\/strong> tem como padr\u00e3o o display <strong>block<\/strong>, a tag <strong>&lt;span&gt;<\/strong> tem como padr\u00e3o o display <strong>inline-block<\/strong>.<\/p>\n\n\n\n<p>Vejamos ent\u00e3o o c\u00f3digo abaixo, utilizando apenas um texto tanto nas divs quanto nos span:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;span&gt;meu span 1 &lt;\/span&gt;\n&lt;span&gt;meu span 2 &lt;\/span&gt;\n&lt;div&gt;minha div 1&lt;\/div&gt;\n&lt;div&gt;minha div 2&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Dessa forma, observe o resultado conforme a imagem abaixo:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-02.jpg\" alt=\"Exemplo de spans e divs\" class=\"wp-image-4055\" width=\"210\" height=\"83\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-02.jpg 210w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-02-1x1.jpg 1w\" sizes=\"(max-width: 210px) 100vw, 210px\" \/><\/figure>\n\n\n\n<p>Observe que os span n\u00e3o receberam uma quebra de linha, e por isso ficaram um do lado do outro. J\u00e1 a HTML Div automaticamente realiza uma quebra de linha.<\/p>\n\n\n\n<p>Para efeitos visuais, vamos agora utilizar o seguinte exemplo, incluindo um estilo CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;title&gt;HTML Div vs HTML Span&lt;\/title&gt;\n&lt;style&gt;\n    .vermelho{\n        background-color: red;\n    }\n    .azul{\n        background-color: blue;\n    }\n    .verde{\n        background-color: green;\n    }\n    .rosa{\n        background-color: pink;\n    }\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;span class=\"vermelho\"&gt;&lt;\/span&gt;\n    &lt;span class=\"azul\"&gt;&lt;\/span&gt;\n    &lt;div class=\"verde\"&gt;&lt;\/div&gt;\n    &lt;div class=\"rosa\"&gt;&lt;\/div&gt;    \n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Com este exemplo, o resultado ser\u00e1 conforme a imagem abaixo:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-03.jpg\" alt=\"Exemplo visual entre Div HTML e Span\" class=\"wp-image-4056\" width=\"162\" height=\"71\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-03.jpg 162w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-03-1x1.jpg 1w\" sizes=\"(max-width: 162px) 100vw, 162px\" \/><\/figure>\n\n\n\n<p>Dessa forma, fica mais evidente a diferen\u00e7a pr\u00e1tica entre um elemento HTML Div e um elemento span.<br><a name=\"top07\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Posicionamento_de_HTML_Div\"><\/span>Posicionamento de HTML Div<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Atrav\u00e9s das propriedades do CSS podemos utilizar diversas posi\u00e7\u00f5es. Vamos explicar aqui algumas delas. Para poder alterar a posi\u00e7\u00e3o de um elemento HTML atrav\u00e9s do CSS, podemos modificar a propriedade de posi\u00e7\u00e3o, assim como utilizando t\u00e9cnicas como margem e flutua\u00e7\u00e3o, dentre outras. Dessa forma, vamos entender as propriedades <strong>position<\/strong>, <strong>margin<\/strong> e <strong>float<\/strong> do CSS.<br><a name=\"top08\"><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"CSS_Postition\"><\/span>CSS Postition<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>A propriedade position permite definir o tipo de posi\u00e7\u00e3o utilizada para o elemento. Com isso, podemos definir uma posi\u00e7\u00e3o relativa, uma posi\u00e7\u00e3o absoluta, ou ainda uma posi\u00e7\u00e3o fixa. Tamb\u00e9m h\u00e1 a posi\u00e7\u00e3o est\u00e1tica e a posi\u00e7\u00e3o pegajosa. Vamos estudar as posi\u00e7\u00f5es relativa, absoluta e fixa:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Posi\u00e7\u00e3o relativa<\/h4>\n\n\n\n<p>Como sugere o nome, especifica uma posi\u00e7\u00e3o relativa do elemento em rela\u00e7\u00e3o ao elemento pai ou ao elemento anterior. Esta posi\u00e7\u00e3o pode ser definida com as propriedades <strong>top, bottom, left<\/strong> e <strong>right.<\/strong> Vejamos ent\u00e3o o exemplo abaixo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;title&gt;HTML Div Position&lt;\/title&gt;\n    &lt;style&gt;\n        #elemento_pai{\n            width: 300px;\n            height: 300px;\n            background-color: #ccc;\n        }\n        .posrelativa{\n            position: relative;\n            width: 150px;\n            height: 60px;\n        }\n        .vermelho{\n            background-color: red;\n        }\n        .azul{\n            background-color: blue;\n        }\n        .top50{\n            top: 50px;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div id=\"elemento_pai\"&gt;\n        &lt;div class=\"posrelativa azul\"&gt;01&lt;\/div&gt;\n        &lt;div class=\"posrelativa vermelho\"&gt;02&lt;\/div&gt;\n        &lt;div class=\"posrelativa azul top50\"&gt;03&lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Observe que aplicamos a todas as divs filhas uma classe contendo uma posi\u00e7\u00e3o relativa. Observe tamb\u00e9m que a terceira div, atrav\u00e9s da classe <strong>.top50<\/strong>, inclu\u00edmos um top de 50px. Como se trata de uma posi\u00e7\u00e3o relativa, a <strong>div.top50<\/strong> receber\u00e1 uma dist\u00e2ncia de 50px de topo em rela\u00e7\u00e3o \u00e0 div anterior. Dessa forma, teremos um resultado conforme o exemplo da imagem abaixo:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-05-1.jpg\" alt=\"HTML Div com posi\u00e7\u00e3o relativa\" class=\"wp-image-4059\" width=\"388\" height=\"386\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-05-1.jpg 388w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-05-1-150x150.jpg 150w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-05-1-300x298.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-05-1-1x1.jpg 1w\" sizes=\"(max-width: 388px) 100vw, 388px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Position absolute<\/h4>\n\n\n\n<p>A posi\u00e7\u00e3o absoluta representa uma posi\u00e7\u00e3o que levar\u00e1 em considera\u00e7\u00e3o a dist\u00e2ncia em rela\u00e7\u00e3o \u00e0 div pai relativa. Portanto, ela ter\u00e1 uma posi\u00e7\u00e3o independente dos demais elementos, podendo at\u00e9 mesmo ficar por cima ou por baixo dos demais elementos. Esta posi\u00e7\u00e3o pode ser definida com as propriedades <strong>top, bottom, left<\/strong> e <strong>right.<\/strong> Vejamos ent\u00e3o o exemplo abaixo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;title&gt;HTML Div Position&lt;\/title&gt;\n    &lt;style&gt;\n        #elemento_pai{\n            width: 250px;\n            height: 250px;\n            background-color: #ccc;\n            position: relative;\n        }\n        .posrelativa{\n            position: relative;\n            width: 150px;\n            height: 150px;\n        }\n        .posabsoluta{\n            position: absolute;\n            top: 50px;\n            left: 50px;\n            width: 150px;\n            height: 150px;\n        }\n        .azul{\n            background-color: blue;\n        }\n        .vermelho{\n            background-color: red;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div id=\"elemento_pai\"&gt;\n        &lt;div class=\"posrelativa azul\"&gt;01&lt;\/div&gt;\n        &lt;div class=\"posabsoluta vermelho\"&gt;02&lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Dessa forma, o resultado do exemplo ser\u00e1 conforme na imagem abaixo:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-06.jpg\" alt=\"HTML Div com posi\u00e7\u00e3o absoluta\" class=\"wp-image-4060\" width=\"330\" height=\"320\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-06.jpg 330w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-06-300x291.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-06-1x1.jpg 1w\" sizes=\"(max-width: 330px) 100vw, 330px\" \/><\/figure>\n\n\n\n<p>Observe que utilizamos uma posi\u00e7\u00e3o absoluta ao bloco vermelho. Como o elemento pai (<strong>div#elemento_pai<\/strong>) possui uma posi\u00e7\u00e3o relativa, a div com posi\u00e7\u00e3o absoluta levar\u00e1 em considera\u00e7\u00e3o apenas a posi\u00e7\u00e3o do elemento pai. Como definimos um valor de dist\u00e2ncia do topo e dist\u00e2ncia da esquerda de 50px, chegamos ao exemplo acima. Se n\u00e3o tiv\u00e9ssemos atribu\u00eddo as propriedades <strong>top<\/strong> e <strong>left<\/strong>, a mesma ficaria por cima do bloco azul.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Position fixed<\/h4>\n\n\n\n<p>A posi\u00e7\u00e3o fixa \u00e9 muito parecida com a posi\u00e7\u00e3o absoluta. Por\u00e9m, ela se mant\u00e9m fixa, ou seja, independente da posi\u00e7\u00e3o da barra de rolagem (scroll), este elemento se encontrar\u00e1 na mesma posi\u00e7\u00e3o da tela. Esta posi\u00e7\u00e3o pode ser definida com as propriedades top, bottom, left e right.<\/p>\n\n\n\n<p>Portanto, vejamos o exemplo abaixo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;title&gt;HTML Div Position&lt;\/title&gt;\n    &lt;style&gt;\n        #corpo{\n            height: 10000px;\n            width: 100%;\n            background-color: #ccc;\n        }\n        #fixo{\n            position: fixed;\n            top: 20px;\n            right: 20px;\n            width: 50px;\n            height: 50px;\n            background-color: blue;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div id=\"corpo\"&gt;&lt;\/div&gt;\n    &lt;div id=\"fixo\"&gt;&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Observe ent\u00e3o nas <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/html-img\/\">imagens abaixo a mesma p\u00e1gina<\/a>, por\u00e9m com posi\u00e7\u00e3o da barra de rolagem diferentes. Mesmo assim, a <strong>div#fixo<\/strong> se mant\u00e9m na mesma posi\u00e7\u00e3o em rela\u00e7\u00e3o \u00e0 tela:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-07.jpg\" alt=\"Posi\u00e7\u00e3o Fixed\" class=\"wp-image-4061\" width=\"602\" height=\"487\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-07.jpg 602w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-07-300x243.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-07-1x1.jpg 1w\" sizes=\"(max-width: 602px) 100vw, 602px\" \/><\/figure>\n\n\n\n<p><br><a name=\"top09\"><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"CSS_margin\"><\/span>CSS margin<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Atrav\u00e9s de uma margem, \u00e9 poss\u00edvel manipular a posi\u00e7\u00e3o de um elemento HTML. Com isso podemos posicionar um elemento HTML Div atrav\u00e9s da <strong>margin<\/strong>. Existem quatro tipos de margin: <strong>margin-top<\/strong>, <strong>margin-right<\/strong>, <strong>margin-bottom<\/strong>, <strong>margin-left<\/strong>. Ou seja, margem superior, margem \u00e0 direita, margem inferior e margem \u00e0 esquerda. Tamb\u00e9m podemos utilizar a propriedade <strong>margin<\/strong>, contendo um, dois ou quatro valores. Caso utilize apenas um valor, esse valor ser\u00e1 aplicado a todas as margens. Caso utilize dois valores, como, por exemplo, <strong>margin:10px 5px<\/strong>, o primeiro valor ser\u00e1 para as margens superior e inferior, j\u00e1 o segundo valor ser\u00e1 para as margens direita e esquerda. Por fim, utilizando quatro valores, o primeiro representa a margem superior, o segundo margem a direita, o terceiro a margem inferior e o quarto a margem a esquerda.<\/p>\n\n\n\n<p>Desta forma, vejamos ent\u00e3o o exemplo abaixo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;title&gt;HTML Div Margin&lt;\/title&gt;\n    &lt;style&gt;\n        div{\n            width: 100px;\n            height: 100px;\n        }\n        .div_1{\n            background-color: red;\n            margin-bottom: 20px;\n        }\n        .div_2{\n            background-color: blue;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;    \n    &lt;div class=\"div_1\"&gt;&lt;\/div&gt;\n    &lt;div class=\"div_2\"&gt;&lt;\/div&gt;    \n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Dessa forma, nosso elemento div.div_1 fica com uma margem inferior de 20px, portanto o resultado ser\u00e1 como na imagem abaixo:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-08.jpg\" alt=\"HTML DIV com margem\" class=\"wp-image-4063\" width=\"137\" height=\"287\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-08.jpg 137w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-08-1x2.jpg 1w\" sizes=\"(max-width: 137px) 100vw, 137px\" \/><\/figure>\n\n\n\n<p>Podemos ainda utilizar a margem para centralizar uma HTML div. Para isso, basta definir que as margens \u00e0 direita e \u00e0 esquerda fiquem no modo autom\u00e1tico. Dessa forma, a margem ser\u00e1 definida igualmente para ambos os lados e, portanto, o elemento ficar\u00e1 centralizado. Vejamos o exemplo abaixo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;title&gt;HTML Div Margin&lt;\/title&gt;\n    &lt;style&gt;\n        div#pai{\n            width: 300px;\n            height: 200px;\n            background-color: #ccc;\n        }\n        div#filha{\n            margin-right: auto;\n            margin-left: auto;\n            width: 100px;\n            height: 100px;\n            background-color: blue;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div id=\"pai\"&gt;\n        &lt;div id=\"filha\"&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Dessa forma, teremos o resultado abaixo:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-09.jpg\" alt=\"Margin auto\" class=\"wp-image-4064\" width=\"393\" height=\"262\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-09.jpg 393w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-09-300x200.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-09-1x1.jpg 1w\" sizes=\"(max-width: 393px) 100vw, 393px\" \/><\/figure>\n\n\n\n<p>Observe que o elemento ficou centralizado. Poder\u00edamos tamb\u00e9m ter utilizado a propriedade de margem dessa forma: <strong>margin: 0 auto;<\/strong>.<\/p>\n\n\n\n<p>Este recurso \u00e9 muito utilizado para a cria\u00e7\u00e3o de cont\u00eainer com um limite de largura que deve se manter sempre centralizado na p\u00e1gina. Portanto, \u00e9 importante entender como funciona esta t\u00e9cnica, pois, muito provavelmente, voc\u00ea precisar\u00e1 utiliz\u00e1-la ou ver\u00e1 em diversas folhas de estilo.<br><a name=\"top10\"><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"CSS_float\"><\/span>CSS float<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Existe uma propriedade muito \u00fatil do CSS chamado de <strong>float,<\/strong> ou flutua\u00e7\u00e3o. Desta forma \u00e9 poss\u00edvel manter um elemento flutuado. Por exemplo, quando queremos manter duas divs em uma mesma linha, podemos flutuar elas. Ou ainda quando queremos manter um texto e uma div flutuando ao lado desse texto. Podemos utilizar o <strong>float:left; <\/strong>para flutuar o elemento \u00e0 esquerda ou ainda o <strong>float:right; <\/strong>para flutuar o elemento \u00e0 direita. Para limpar uma flutua\u00e7\u00e3o podemos usar o <strong>float:none;<\/strong>. Por\u00e9m, a flutua\u00e7\u00e3o \u00e9 uma propriedade um pouco imprecisa, portanto, recomenda-se utilizar aliado a propriedades de margem ou padding. Para que n\u00e3o ocorra erros de renderiza\u00e7\u00e3o, tamb\u00e9m \u00e9 importante, sempre que utilizar uma flutua\u00e7\u00e3o, limpar a mesma com a propriedade <strong>clear<\/strong>. Vejamos ent\u00e3o o seguinte exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;title&gt;HTML Div Float&lt;\/title&gt;\n    &lt;style&gt;\n        div.container{\n            width: 400px;\n            background-color: #ccc;\n            height: auto;\n        }\n        div{\n            width: 100px;height: 100px;\n        }\n        .esquerda{\n            background-color: green;\n            float: left;\n        }\n        .direita{\n            background-color: blue;\n            float: right;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=\"container\"&gt;\n        &lt;div class=\"esquerda\"&gt;Div 01&lt;\/div&gt;\n        &lt;div class=\"direita\"&gt;Div 02&lt;\/div&gt;\n        &lt;div style=\"clear: both;\"&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Observe que no exemplo utilizamos uma div pai, com a classe <strong>.container<\/strong>, para poder conter os elementos dentro de at\u00e9 400px. Posteriomente, inclu\u00edmos duas divs, cada um contendo uma classe com flutua\u00e7\u00e3o para um dos lados. Por fim, utilizamos uma div com o estilo &#8220;<strong>clear:both<\/strong>&#8221; para poder limpar o efeito da flutua\u00e7\u00e3o. Vejamos ent\u00e3o o resultado abaixo:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-10.jpg\" alt=\"Utiizando flutua\u00e7\u00e3o nas divs\" class=\"wp-image-4065\" width=\"521\" height=\"143\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-10.jpg 521w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-10-300x82.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-10-1x1.jpg 1w\" sizes=\"(max-width: 521px) 100vw, 521px\" \/><\/figure>\n\n\n\n<p>Caso n\u00e3o utiliz\u00e1ssemos a propriedade clear ao final dos elementos flutuados, observe que o elemento pai, que cont\u00e9m uma altura autom\u00e1tica, sumiria, portanto, geraria uma falha no layout:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;div class=\"container\"&gt;\n    &lt;div class=\"esquerda\"&gt;Div 01&lt;\/div&gt;\n    &lt;div class=\"direita\"&gt;Div 02&lt;\/div&gt;\n&lt;\/div&gt;\n<\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-11.jpg\" alt=\"Exemplo de flutua\u00e7\u00e3o sem o clear\" class=\"wp-image-4066\" width=\"521\" height=\"140\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-11.jpg 521w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-11-300x81.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-11-1x1.jpg 1w\" sizes=\"(max-width: 521px) 100vw, 521px\" \/><\/figure>\n\n\n\n<p>Vamos agora ver uma forma de utilizar uma div flutuando ao lado de um texto:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;title&gt;HTML Div Float&lt;\/title&gt;\n    &lt;style&gt;\n        div.container{\n            width: 400px;\n            background-color: #ccc;\n            height: auto;\n        } \n        .flutuante{\n            background-color: green;\n            float: left;\n            width: 100px;height: 100px;\n            margin-right: 10px;\n            margin-bottom: 10px;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;div class=\"container\"&gt;\n    &lt;div class=\"flutuante\"&gt;Div 01&lt;\/div&gt;\n    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec metus euismod, eleifend massa ac, maximus turpis. \nNunc tincidunt massa risus, vitae efficitur sapien posuere eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra,\nper inceptos himenaeos. Donec vel posuere risus.&lt;\/p&gt;\n    &lt;div style=\"clear: both;\"&gt;&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Dessa forma, obtemos o resultado do exemplo conforme a imagem abaixo:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-12.jpg\" alt=\"HTML Div flutuante com texto\" class=\"wp-image-4067\" width=\"518\" height=\"184\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-12.jpg 518w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-12-300x107.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/ex-12-1x1.jpg 1w\" sizes=\"(max-width: 518px) 100vw, 518px\" \/><\/figure>\n\n\n\n<p>Portanto, podemos utilizar o <strong>float<\/strong> para diversas situa\u00e7\u00f5es, principalmente em casos envolvendo texto e HTML Div. Isso permite criar diversos elementos dentro do layout de nossas p\u00e1ginas web.<\/p>\n\n\n\n<p>Por\u00e9m, apesar dos conhecimentos sobre flutua\u00e7\u00e3o serem muito importantes, j\u00e1 s\u00e3o considerados ultrapassados para o desenvolvimento completo de layouts. Portanto, recomendamos utilizar a flutua\u00e7\u00e3o apenas em casos realmente necess\u00e1rio e n\u00e3o como elemento principal do seu layout.<br><a name=\"top11\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusao_sobre_HTML_Div\"><\/span>Conclus\u00e3o sobre HTML Div<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Com este artigo, voc\u00ea j\u00e1 obt\u00e9m um dom\u00ednio completo sobre o elemento HTML Div. Aconselhamos ainda, que para um melhor aproveitamento, voc\u00ea estude a respeito dos diversos tipos de display, como, por exemplo, o <strong>flexbox<\/strong> e o <strong>grid.<\/strong><\/p>\n\n\n\n<p>Portanto, conhecer as caracter\u00edsticas, atributos e propriedades envolvendo HTML Div permite criar uma p\u00e1gina HTML bem mais complexa. Por\u00e9m, \u00e9 necess\u00e1rio estar atento a quando utilizar uma divis\u00e3o com HTML Div, pois com o HTML5, \u00e9 importante manter um c\u00f3digo sem\u00e2ntico, e podemos criar divis\u00f5es com outros elementos que carregam esse valor.<\/p>\n\n\n\n<p>Em nosso blog&nbsp;voc\u00ea pode encontrar mais artigos sobre HTML, CSS e diversos outros assuntos da \u00e1rea de desenvolvimento e TI. Portanto, recomendamos praticar bem todos os exemplos desse artigo, al\u00e9m de aproveitar para aprofundar seus estudos com outros artigos. Com isso, voc\u00ea poder\u00e1 <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/criar-site-profissional\/\" target=\"_blank\" rel=\"noopener\">criar p\u00e1ginas HTML<\/a> profissionais para o(s) seu(s) pr\u00f3prio(s) website(s).<\/p>\n\n\n\n<p>Voc\u00ea pode contratar um plano de <a href=\"https:\/\/www.homehost.com.br\/hospedagem-de-sites\/\">hospedagem de sites<\/a> para poder colocar suas p\u00e1ginas online!!! A HomeHost oferece diversos planos para voc\u00ea, escolha o que melhor lhe atender e comece agora a colocar online o seu projeto!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A HTML Div \u00e9 um dos elementos mais conhecidos do HTML. At\u00e9 o lan\u00e7amento do HTML5, era muito utilizado para dividir todas sess\u00f5es e todos os blocos do documento. Por\u00e9m, com a atualiza\u00e7\u00e3o da vers\u00e3o 5 do HTML, come\u00e7ou a dividir o espa\u00e7o com as demais tags sem\u00e2nticas. Ainda assim, \u00e9 um elemento muito importante [&hellip;]<\/p>\n","protected":false},"author":18,"featured_media":4070,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_helpful_status":1,"_lmt_disableupdate":"","_lmt_disable":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3,4,213,203,229,20,6,164],"tags":[160,2624,252,2621,3306,21,260,3307],"class_list":["post-4050","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-criar-sites","category-desenvolvedores","category-frontpage","category-internet","category-outros","category-php","category-tutoriais","category-wordpress-tutoriais","tag-criar-um-site","tag-css","tag-desenvolvimento","tag-html","tag-html5","tag-php","tag-site","tag-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HTML Div: o elemento de divis\u00e3o do HTML | Homehost<\/title>\n<meta name=\"description\" content=\"HTML Div: tudo o que voc\u00ea precisa para entender como funciona o elemento de divis\u00f5es do HTML, assim como suas principais propriedades e usos.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Div: o elemento de divis\u00e3o do HTML | Homehost\" \/>\n<meta property=\"og:description\" content=\"HTML Div: tudo o que voc\u00ea precisa para entender como funciona o elemento de divis\u00f5es do HTML, assim como suas principais propriedades e usos.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/\" \/>\n<meta property=\"og:site_name\" content=\"Homehost\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Homehost\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-07T10:45:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-13T09:56:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/div_html.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1122\" \/>\n\t<meta property=\"og:image:height\" content=\"440\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Rafael Marques\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Homehost\" \/>\n<meta name=\"twitter:site\" content=\"@Homehost\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rafael Marques\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/\",\"name\":\"HTML Div: o elemento de divis\u00e3o do HTML | Homehost\",\"isPartOf\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/div_html.png\",\"datePublished\":\"2019-08-07T10:45:30+00:00\",\"dateModified\":\"2024-01-13T09:56:11+00:00\",\"author\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e\"},\"description\":\"HTML Div: tudo o que voc\u00ea precisa para entender como funciona o elemento de divis\u00f5es do HTML, assim como suas principais propriedades e usos.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/#primaryimage\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/div_html.png\",\"contentUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/div_html.png\",\"width\":1122,\"height\":440,\"caption\":\"Div HTML\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.homehost.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML Div: o elemento de divis\u00e3o do HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/\",\"name\":\"Homehost\",\"description\":\"Hospedagem De Sites\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e\",\"name\":\"Rafael Marques\",\"description\":\"Especialista em Desenvolvimento Web e Marketing. \u00c9 apaixonado por tecnologia, empreendedorismo, audiovisual e animais. Em sua carreira, dedica-se ao empreendedorismo, al\u00e9m de atuar como Desenvolvedor Fullstack e redator t\u00e9cnico. Gosta de usar seu tempo livre para assistir a filmes, jogar, escrever, e passar um bom tempo brincando e mimando seus animais de estima\u00e7\u00e3o. Contato: rafael.blog@homehost.com.br\",\"sameAs\":[\"https:\/\/www.instagram.com\/rafamarquesrmb\/\",\"https:\/\/www.linkedin.com\/in\/rafamarquesrmb\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML Div: o elemento de divis\u00e3o do HTML | Homehost","description":"HTML Div: tudo o que voc\u00ea precisa para entender como funciona o elemento de divis\u00f5es do HTML, assim como suas principais propriedades e usos.","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:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/","og_locale":"pt_BR","og_type":"article","og_title":"HTML Div: o elemento de divis\u00e3o do HTML | Homehost","og_description":"HTML Div: tudo o que voc\u00ea precisa para entender como funciona o elemento de divis\u00f5es do HTML, assim como suas principais propriedades e usos.","og_url":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/","og_site_name":"Homehost","article_publisher":"https:\/\/www.facebook.com\/Homehost\/","article_published_time":"2019-08-07T10:45:30+00:00","article_modified_time":"2024-01-13T09:56:11+00:00","og_image":[{"width":1122,"height":440,"url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/div_html.png","type":"image\/png"}],"author":"Rafael Marques","twitter_card":"summary_large_image","twitter_creator":"@Homehost","twitter_site":"@Homehost","twitter_misc":{"Escrito por":"Rafael Marques","Est. tempo de leitura":"15 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/","url":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/","name":"HTML Div: o elemento de divis\u00e3o do HTML | Homehost","isPartOf":{"@id":"https:\/\/www.homehost.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/#primaryimage"},"image":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/#primaryimage"},"thumbnailUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/div_html.png","datePublished":"2019-08-07T10:45:30+00:00","dateModified":"2024-01-13T09:56:11+00:00","author":{"@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e"},"description":"HTML Div: tudo o que voc\u00ea precisa para entender como funciona o elemento de divis\u00f5es do HTML, assim como suas principais propriedades e usos.","breadcrumb":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/#primaryimage","url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/div_html.png","contentUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/div_html.png","width":1122,"height":440,"caption":"Div HTML"},{"@type":"BreadcrumbList","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.homehost.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML Div: o elemento de divis\u00e3o do HTML"}]},{"@type":"WebSite","@id":"https:\/\/www.homehost.com.br\/blog\/#website","url":"https:\/\/www.homehost.com.br\/blog\/","name":"Homehost","description":"Hospedagem De Sites","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e","name":"Rafael Marques","description":"Especialista em Desenvolvimento Web e Marketing. \u00c9 apaixonado por tecnologia, empreendedorismo, audiovisual e animais. Em sua carreira, dedica-se ao empreendedorismo, al\u00e9m de atuar como Desenvolvedor Fullstack e redator t\u00e9cnico. Gosta de usar seu tempo livre para assistir a filmes, jogar, escrever, e passar um bom tempo brincando e mimando seus animais de estima\u00e7\u00e3o. Contato: rafael.blog@homehost.com.br","sameAs":["https:\/\/www.instagram.com\/rafamarquesrmb\/","https:\/\/www.linkedin.com\/in\/rafamarquesrmb\/"]}]}},"modified_by":"ad_hmhst","jetpack_featured_media_url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/div_html.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/4050","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/comments?post=4050"}],"version-history":[{"count":15,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/4050\/revisions"}],"predecessor-version":[{"id":13171,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/4050\/revisions\/13171"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media\/4070"}],"wp:attachment":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media?parent=4050"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/categories?post=4050"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/tags?post=4050"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}