desenvolvimento para web - xhtml, css, padrões da web, usabilidade, acessibilidade, web design, SEO, blogs e tecnologias para desenvolver a web Développement web - xhtml, css, standards du Web, l'utilisabilité, l'accessibilité, web design, SEO, des blogs et de la technologie pour développer le web

Entender o correto funcionamento ea dinâmica da propriedade CSS “float” é fundamental para o desenvolvimento e estruturação de bons layouts para web . Comprendre le bon fonctionnement et la dynamique de la propriété CSS "float" est fondamentale pour le développement et la structuration de bonnes mises en page pour le Web. Saber usar corretamente float em web sites e projetos web , em geral, é de extrema importância, já que, basicamente, é através das regras CSS que utilizam float que é possível compor layouts sem o uso de tabelas ( tableless ), o que traz inúmeros benefícios, como economia no tempo de carregamento, adequação às normas W3C e, consequentemente, um aumento de performance, em geral. Apprenez à utiliser correctement flotter sur les sites web et projets web, en général, est d'une extrême importance parce que, fondamentalement, se fait par l'utilisation de règles CSS float est possible que les mises en page composer sans l'utilisation de tableaux (feedback), qui apporte de nombreux avantages tels que l'économie dans le temps de chargement, correspondant aux standards du W3C et donc une augmentation des performances en général.

O que é “Float”? Qu'entend-on par «Float»?

Float é uma propriedade CSS de posicionamento. Flotteur est une propriété de positionnement CSS. Se você está familiarizado com projetos para mídia impressa, você pode pensar, de forma semelhante, numa imagem em um layout onde o texto a circunda quando necessário. Si vous êtes familier avec des projets pour les médias imprimés, vous pouvez penser, de la même manière, une image d'une mise en page où le texte environnant en cas de besoin.

No design para web , uma imagem inserida continua a fazer parte do fluxo da página. Comme pour la conception de Web, une image insérée fait toujours partie du flux de la page. Isto significa que, se forem feitas alterações no tamanho ou se elementos ao seu redor mudarem, a página irá automaticamente ser reajustada (” reflow “). Cela signifie que si des modifications sont apportées à la taille ou de savoir si des éléments autour de vous changer, la page sera automatiquement réajusté ( "reflow"). Isso difere da página onde os elementos são posicionados de forma absoluta. Cela diffère de la page sur laquelle les éléments sont positionnés de façon absolue. Elementos posicionados de forma absoluta são removidos do fluxo da página web . Éléments positionnés de façon absolue sont retirés de la circulation de la page Web. Elementos posicionados absolutamente não afetarão quaisquer outros elementos da página, quer estes estejam em contato, ou não. Éléments positionnés absolument aucune incidence sur les autres éléments de la page, si elles sont en contact, ou non.

Para que são usados os floats? Pour que les flotteurs sont utilisés?

Além de simples exemplos, como posicionar uma imagem ao lado de um bloco de texto, floats são usados para criar layouts para web . En plus des exemples simples, comme une image mise à côté d'un bloc de texte, les flotteurs sont utilisés pour créer des mises en page pour le Web.

Floats são igualmente úteis para layouts de pequenas instâncias. Les chars sont également utiles pour l'aménagement des petits corps. Veja, por exemplo, esta parte de uma web page : Voir, par exemple, cette partie d'une page Web:

Esses tipos de layouts podem ser manipulados usando posicionamento absoluto dentro de posicionamento relativo, mas elementos que flutuam (propriedade CSS “float”) são mais flexíveis. Ces types de mises en page peuvent être manipulées en utilisant le positionnement absolu au sein de positionnement relatif, mais des éléments qui flottent (propriété CSS "float") sont plus souples. Vamos supor que o tamanho da imagem de um avatar precise ser alterado. Imaginons que la taille de l'image d'un avatar besoin d'être changée. Com floats , o box pode ser reestruturado para acomodar um tamanho maior, enquanto um posicionamento absoluto criaria problemas: Avec flotteurs, la boîte peut être restructuré afin d'accueillir un plus grand taille, comme un positionnement absolu de créer des problèmes:

Problemas com floats Problèmes avec flotteurs

“ Floats são frágeis”. "Les chars sont fragiles." Eles são cheios de “contratempos” e cross-browser quirks . Ils sont pleins de «revers» et traverser navigateur bizarreries. Talvez o mais significativo seja a necessidade de “limpar” floats (propriedade CSS “clear”) em algumas situações. Peut-être la plus importante est la nécessité pour "clair" flotteurs (propriété CSS "clear") dans certaines situations. Primeiro, vejam alguns exemplos de porque alguns floats precisam ser “limpos” e, depois, como fazer esta “limpeza”. Tout d'abord, voir quelques exemples des raisons pour lesquelles certains flotteurs doivent être "propres" et puis comment faire ce "nettoyage".

Arrumar o float para ajustar a altura do elemento pai Arrumar le char d'ajuster la hauteur de l'élément parent

Elementos que contêm elementos float não calculam sua altura como é de se esperar. Les éléments qui contiennent des éléments flottent pas calculer sa hauteur car il est à prévoir. De fato, se o elemento pai contém apenas elementos flutuadores, navegadores vão renderizar a altura em zero (como se fosse “ height:0 “). En fait, si l'élément parent ne contient que des éléments flotteurs, les navigateurs se rendre au point zéro (comme si c'était "height: 0").

Se você der um “ clear ” antes de fechar a tag do elemento pai, você conserta isso. Si vous donnez une "claire" avant de fermer le tag de l'élément parent, vous le réparer.

Limpar o float para começar uma nova linha Effacer le char de commencer une nouvelle ligne

Vamos dizer que você tem uma série de elementos flutuantes. Disons que vous avez une série d'éléments flottants.

Então, digamos que você quer criar uma pausa nesta grade de elementos, a fim de iniciar uma nova linha. Donc, disons que vous voulez créer une pause dans cette grille d'éléments afin de lancer une nouvelle ligne. Porque, você sabe, iss faz sentido apenas visualmente falando. Parce que, vous le savez, iss n'a de sens que visuellement parlant.

Dando “ clear ” somente à esquerda ou à direita En donnant "clair" que vers la gauche ou la droite

Os dois exemplos acima são exemplos genéricos de como fazer o uso de “clear” para fazer a “limpeza”, ou seja, dar clear tanto à direita, quanto à esquerda. Les deux exemples ci-dessus sont des exemples de la façon dont l'utilisation générique de "clarté" au "nettoyage", ou donner des indications claires tant pour le droit, sur la gauche. Porque floats podem ser tanto à direita, como à esquerda, e você pode, evidentemente, dar um float somente à esquerda ou somente à direita. Parce que les flotteurs peuvent être à la fois à droite, comme la gauche, et vous pouvez bien sûr faire flotter un peu à gauche ou à droite. Isso pode ser útil quando fazer a limpeza de ambos os lados (” clear:both “) seja problemático. Cela peut être utile lorsque vous faites le nettoyage des deux parties ( "clair: les deux") est problématique.

Se tivesse sido dado um clear em ambos os lados (” clear:both “) no exemplo acima, a segunda imagem teria sido empurrada para baixo, onde termina o bloco de texto. S'il avait été donné une claire sur les deux côtés ( «claire: les deux") dans l'exemple ci-dessus, la seconde image aurait été poussé vers le bas, qui se termine le bloc de texte.

Diferentes técnicas de clear Différentes techniques de Clear

Assim como tudo em CSS, há mais de um jeito para fazer isso. Comme dans tout CSS, plus d'un moyen d'y parvenir.

Usando “ clear ” exatamente onde você precisa Utilisation de "clair" exactement où vous en avez besoin

A propriedade CSS “ clear ” faz exatamente o que “diz na caixa”. La propriété CSS "claire" est exactement ce que dit la boîte. " O problema reside em onde e como aplicar um elemento à página com a propriedade clear correta. Le problème réside dans le lieu et la manière d'appliquer un élément à la page avec des droit de propriété.

• Aplicar “clear:both” ao elemento imediatamente seguinte ao que você precisa que seja “limpo”. Tomemos um exemplo perto do topo de um layout de web page com o cabeçalho e rodapé de largura total, com o conteúdo principal flutuando à esquerda e uma barra lateral à direita. Appliquer "clair: à la fois" la question immédiatement après que vous avez besoin d'être clair. Prenons un exemple, vers le haut d'une page Web avec la disposition de l'en-tête et pied de l'échelle totale, dont le contenu et un flottant à gauche l'encadré à droite. A fim de que o rodapé aparece no lugar certo, você deve limpar a flutuação antes dele. Afin que la note de bas de page apparaît au bon endroit, vous devez effacer le flottant devant lui. Neste simples exemplo, você pode aplicar aplicar clear:both na própria div do rodapé. Dans cet exemple simple, vous pouvez demander appliquer clair: à la fois tout en bas de div.

Esta técnica é maravilhosa, já que ela funciona bem sem a necessidade de códigos supérfluos. Cette technique est merveilleux, parce que cela fonctionne bien sans la nécessité, pour les codes superflu. No entanto, ela às vezes falha em sites dinâmicos. Cependant, elle oublie parfois de sites Web dynamiques. E se, por exemplo, você teve que acrescentar um novo elemento de página acima do rodapé e, consequentemente, abaixo dos outros conteúdos da página? Et si, par exemple, il convient d'ajouter un nouvel élément de page, au-dessus du fond et donc ci-dessous le contenu de la page? Agora você precisaria dar um clear neste elemento ao invés de no rodapé. Maintenant vous devez donner un élément clair dans ce plutôt que le fond. Muitas vezes é mais fácil pensar sobre onde é preciso dar um clear ao invés de em qual elemento é preciso dar um clear . Souvent, il est plus facile de penser à où nous avons besoin d'une claire plutôt que sur ce qui doit être un élément est claire.

• Aplicar “ clear ” e limpar o float em um elemento vazio. DIVs são muito boas porque, geralmente, você não tem nenhum estilo aplicado a elas (como em um elemento de parágrafo “p”, por exemplo) e elas não têm nenhuma funcionalidade especial (como um “<br />”). Appliquer "claires" et effacer le flotter dans le vide. DIVs sont très bonnes parce que, généralement, vous n'avez pas le style qui leur sont appliquées (comme dans un élément de l'alinéa "p" par exemple) et ils n'ont pas de fonction spéciale (comme un "<br />"). Onde for preciso limpar o float , apenas insira: <div style=”clear: both;”> </div> . Lorsque nécessaire d'effacer le flotteur, il suffit d'entrer: <div style="clear: both;"> </ div>. Usar estilos in-line não é muito “atraente”, então é melhor fazer uma classe “ clear ” e criar uma regra que faça a limpeza do float , mas isso é apenas uma questão de gosto. Utilisation en ligne des styles n'est pas très "attractif", il est préférable de faire une classe "claires" et créer une règle qui rend le nettoyage du flotteur, mais c'est seulement une question de goût.

O método da DIV vazia: La méthode de vide DIV:

 ...parte de elemento flutuante. </div> <div class = "clear" > </div> <p> ... ... Partie du flottant élément. </ Div> <div class = "clear"> </ div> <p> ... ahhhh, recebi um "clear"! </p> AHHHH, j'ai reçu un "clair"! </ p> 

CSS:

 div .clear { clear : both ; } div. claire (claire: les deux;) 

“overflow:auto” no elemento pai "Overflow: auto" dans l'élément parent

É difícil explicar o motivo, mas a aplicação da propriedade CSS “ overflow:auto ” no elemento pai fará com que sua altura seja calculada corretamente. Il est difficile d'expliquer pourquoi, mais la mise en œuvre de la propriété CSS "overflow: auto" dans l'élément parent provoque sa hauteur est calculé correctement. Ele irá se expandir para englobar os elementos flutuadores ( floats ) ao invés de “dar pau”. Il sera élargi pour englober l'ensemble des flotteurs (flotteurs) plutôt que "à bâton». Isso pode ser muito útil e é muito “limpo”, mas tem alguns inconvenientes. Cela peut être très utile et il est très clair ", mais a quelques inconvénients. O maior deles é que, frequentemente, não faz sentido usar a regra CSS no elemento pai. La plus grande d'entre elles est que, souvent, il est logique d'utiliser la règle CSS dans l'élément parent. Pense nas vezes em que você precisa dar um clear em vários elementos que têm um elemento pai em comum; nesse caso, isso não vai ajudá-lo. Pensez à l'époque dans laquelle vous devez donner une claire sur plusieurs éléments qui ont un père en commun, auquel cas elle ne va aider.

Outro problema é que você pode querer usar a propriedade “ overflow ” para outros fins. Un autre problème est que vous voulez mai à utiliser la propriété "overflow" à d'autres fins. E se você quiser esconder o overflow de uma div , em especial? Et si vous voulez masquer le débordement d'une scission, en particulier? Você não pode. Vous ne pouvez pas. Você terá que englobar a div com outra div para conseguir isso. Vous devrez inclure le partage avec une autre division de le faire.

O hack “ clearfix ” (dar o clear com a pseudo-classe “:after”) Le hack "clearfix" (faire savoir clairement à la pseudo-classe "après")

Embora antigo, o artigo do positioniseverything sobre como usar uma pseudo-classe CSS para dar o clear ainda é válido. Bien que vieux, positioniseverything l'article sur l'utilisation d'une pseudo-classe CSS pour faire clair, c'est toujours d'actualité. Explicando rapidamente, a técnica consiste em adicionar um pouco de conteúdo depois do elemento. Expliquer rapidement, la technique consiste à ajouter un peu de substance après l'élément. Este pouco de conteúdo (um espaço, geralmente) é que faz o clear funcionar, mas fica oculto do visitante. Ce bit de contenu (un domaine, en général) est clairement le travail, mais il est caché par le visiteur.

Aqui está um código, aplicado em uma classe CSS para qualquer elemento que precise de um clear : Voici un code, appliquée dans une classe CSS pour tout élément qui nécessite une claire:

 /* This needs to be first because FF3 is now supporting this */ .clearfix { display : inline- block ; } .clearfix :after { content : " " ; display : block ; height : 0 ; clear : both ; font-size : 0 ; visibility : hidden ; } /* Hides from IE-mac \*/ * html .clearfix { height : 1 % ; } .clearfix { display : block ; } /* End hide from IE-mac */ / * Cela doit être d'abord parce que FF3 est maintenant l'appui de cette * /. Clearfix (display: inline-block;). Clearfix: après (le contenu: ""; display: block; hauteur: 0; clair: les deux; font-size : 0; visibility: hidden;) / * cache IE-mac \ * / * html. Clearfix (hauteur: 1%;). Clearfix (display: block;) / * Fin de cacher IE-mac * / 

O artigo citado alerta que a técnica já está ficando velha e fala sobre “ overflow:auto “. L'article cité avertissement que la technique est vieilli et déjà parle de "overflow: auto." Eu não compartilho da opinião de que a técnica está ficando ultrapassada. Je ne partage pas l'opinion selon laquelle la technologie devient obsolète. Esta é completamente diferente da outra técnica de overflow . C'est complètement différent des autres techniques de débordement. Com a “ clearfix “, você aplica a classe no próprio elemento , não no elemento pai. Avec "clearfix», vous demandez à la classe dans leur propre élément, et non l'élément parent. Isso significa que você pode usá-la mesmo quando não se trata de um elemento pai, isto significa que poderá continuar a usá-la, ainda que não exista um elemento pai que faça sentido, e aplicá-la pensando onde o elemento com float precisa de um clear . Cela signifie que vous pouvez l'utiliser même quand elle n'est pas un père, cela signifie que vous pouvez continuer à l'utiliser, même si il est un élément parent qui a du sens, et de l'appliquer en se demandant où l'élément doit flotter une claire.

Outro problema com float : empurrões para baixo (” pushdown “) Un autre problème avec flotteur: pousse vers le bas ( "pushdown")

Esta questão merece uma atenção especial, porque frequentemente as pessoas têm problemas com questões de “empurrões”. Cette question mérite une attention particulière, parce que les gens ont souvent des problèmes avec les questions de "soubresauts". Olhando novamente o exemplo dado no início deste artigo, a div do conteúdo principal flutua à esquerda da div da barra lateral. Si on considère de nouveau l'exemple donné au début de cette article, la répartition du contenu des flotteurs à gauche de la scission de la barre latérale. Esta é uma estrutura comum em muitos blogs . Il s'agit d'une structure commune dans de nombreux blogs.

Quer sejam elementos fixos ou fluidos, ambas as DIVs têm uma largura especificada. Que ce soit fixe ou de fluides, les deux DIVs ont une largeur spécifiée. Eles supostamente comportam-se como elementos flutuantes, ou seja, se um elemento dentro da área do conteúdo principal tem a largura maior que toda esta área (por exemplo, uma imagem muito larga) ele simplesmente se extende através e cobre qualquer coisa que esteja “no caminho”. Ils se sont censés se comporter comme des éléments flottants, ou si un élément dans la zone de contenu principal est la largeur supérieure à l'ensemble de ce domaine (par exemple, une image très grande) si elle s'étend tout simplement par le biais de cuivre et tout ce qui est " No way. " A forma como o IE6 trata isso é bem diferente. La manière dont traite IE6 qui est tout à fait différente. Se um elemento tem a largura maior que a de seu elemento pai, no IE6 a barra lateral vai ser simplesmente empurrada para baixo (” pushdown “), quebrando completamente o layout . Si un élément est supérieure à la largeur de son élément parent, IE6 la barre latérale va tout simplement être poussé vers le bas ( "pushdown"), rompant complètement la mise en page.

A solução? La solution? A melhor solução é não colocar elementos com largura maior que a de seu elemento pai. La meilleure solution est de ne pas placer les éléments de largeur supérieure à celle de son élément parent. Para se protejer melhor, e se seu layout funciona de outra forma (não especifique alturas!), você pode trabalhar com “ overflow:hidden ” para esconder algo que seja preciso. Pour mieux protéger, et si votre mise en page fonctionne différemment (sans préciser les hauteurs), vous pouvez travailler avec "overflow: hidden" pour cacher quelque chose qui est nécessaire. Ainda há outra solução, que seria usar posicionamento absoluto para posicionar a barra lateral mais à direta. Pourtant, une autre solution, qui utilise le positionnement absolu pour positionner la barre latérale pour plus direct. Lembre-se, entretanto, que posicionamento absoluto retira o elemento do fluxo da página - algo para se levar em consideração. N'oubliez pas, toutefois, que le positionnement absolu réduire l'élément de l'écoulement de la page - quelque chose à prendre en considération.

Há algum tempo saiu no A List Apart um artigo sobre fazer um “falso” posicionamento absoluto, Faux Absolute Positioning , que é uma leitura interessante e aborda uma nova técnica de layout que traz inúmeros benefícios do posicionamento absoluto, conservando o fluxo da página e não indo de encontro à “fragilidade” dos elementos com float . Pour peu de temps sur une liste Outre un article de faire un "faux" de positionnement absolu, Faux Positionnement absolu, qui est une lecture intéressante et répond à une nouvelle technique de présentation qui offre de nombreux avantages de positionnement absolu, tout en maintenant le débit de la page et ne pas allant à l'encontre de la «fragilité» des éléments de flotter.

“Quirks” sobre elementos float "Quirks" sur les éléments float

Outra coisa para se lembrar quando se lida com IE6 é que, se você aplicar uma margem (CSS “margin”) no mesmo sentido que o float (”left” ou “right”), ela deve ser o dobro da margem . Une autre chose à se rappeler lorsque l'on traite avec IE6, c'est que si vous appliquez une marge de CSS ( "marge") dans le même sens que le char ( "gauche" ou "droite"), il convient de doubler la marge.

Para o IE7, existe um pequeno truque sobre sua maneira peculiar de não respeitar margens inferiores (CSS “margin-bottom”) em elementos filhos dentro de objetos flutuantes. Pour IE7, il ya un petit truc sur sa propre façon dont il ne parvient pas à des marges plus faibles (CSS "margin-bottom") des enfants dans les éléments des objets flottants.