desenvolvimento para web - xhtml, css, padrões da web, usabilidade, acessibilidade, web design, SEO, blogs e tecnologias para desenvolver a web Developing web - xhtml, css, web standards, usability, accessibility, web design, SEO, blogs and technology to develop the web

Entender o correto funcionamento ea dinâmica da propriedade CSS “float” é fundamental para o desenvolvimento e estruturação de bons layouts para web . Understand the correct functioning and dynamics of the CSS property "float" is fundamental to the development and structuring of good layouts for 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. Learn to use properly float on web sites and web projects, in general, is of extreme importance because, basically, is through the rules using CSS float is possible that compose layouts without the use of tables (feedback), which brings many benefits such as economy in time of loading, matching the W3C standards and hence an increase performance in general.

O que é “Float”? What is "Float"?

Float é uma propriedade CSS de posicionamento. Float is a property of CSS positioning. 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. If you are familiar with projects for printed media, you can think, in a similar way, an image in a layout where the surrounding text when necessary.

No design para web , uma imagem inserida continua a fazer parte do fluxo da página. As for web design, an inserted image is still part of the flow of the 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 “). This means that if changes are made in size or whether elements around you change, the page will automatically be readjusted ( "reflow"). Isso difere da página onde os elementos são posicionados de forma absoluta. This differs from the page where the elements are positioned so absolute. Elementos posicionados de forma absoluta são removidos do fluxo da página web . Elements positioned so absolute are removed from the flow of the web page. Elementos posicionados absolutamente não afetarão quaisquer outros elementos da página, quer estes estejam em contato, ou não. Elements positioned absolutely will not affect any other elements of the page, whether they are in contact, or not.

Para que são usados os floats? For the floats that are used?

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 . Besides simple examples, such as placing a picture next to a block of text, floats are used to create layouts for Web.

Floats são igualmente úteis para layouts de pequenas instâncias. Floats are also useful for layouts of small bodies. Veja, por exemplo, esta parte de uma web page : See, for example, this part of a web page:

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. These types of layouts can be manipulated using absolute positioning within relative positioning, but elements that float (CSS property "float") are more flexible. Vamos supor que o tamanho da imagem de um avatar precise ser alterado. Let's assume that the image size of an avatar need to be changed. Com floats , o box pode ser reestruturado para acomodar um tamanho maior, enquanto um posicionamento absoluto criaria problemas: With floats, the box can be restructured to accommodate a larger size, as an absolute positioning create problems:

Problemas com floats Problems with floats

“ Floats são frágeis”. "Floats are fragile." Eles são cheios de “contratempos” e cross-browser quirks . They are full of "setbacks" and cross-browser quirks. Talvez o mais significativo seja a necessidade de “limpar” floats (propriedade CSS “clear”) em algumas situações. Perhaps the most significant is the need for "clear" floats (CSS property "clear") in some situations. Primeiro, vejam alguns exemplos de porque alguns floats precisam ser “limpos” e, depois, como fazer esta “limpeza”. First, see some examples of why some floats must be "clean" and then how to do this "cleansing".

Arrumar o float para ajustar a altura do elemento pai Arrumar the float to adjust the height of the parent element

Elementos que contêm elementos float não calculam sua altura como é de se esperar. Elements that contain elements float not calculate its height as it is to be expected. De fato, se o elemento pai contém apenas elementos flutuadores, navegadores vão renderizar a altura em zero (como se fosse “ height:0 “). In fact, if the parent element contains only elements floats, browsers will render the point at zero (as if it were "height: 0").

Se você der um “ clear ” antes de fechar a tag do elemento pai, você conserta isso. If you give a "clear" before closing the tag of the parent element, you repair it.

Limpar o float para começar uma nova linha Clear the float to start a new line

Vamos dizer que você tem uma série de elementos flutuantes. Let's say you have a series of floating elements.

Então, digamos que você quer criar uma pausa nesta grade de elementos, a fim de iniciar uma nova linha. So let's say you want to create a pause in this grid of elements in order to start a new line. Porque, você sabe, iss faz sentido apenas visualmente falando. Because, you know, iss makes sense only visually speaking.

Dando “ clear ” somente à esquerda ou à direita By giving "clear" only to the left or right

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. The two examples above are examples of how the generic use of "clear" to the "cleansing", or give clear both to the right, on the left. Porque floats podem ser tanto à direita, como à esquerda, e você pode, evidentemente, dar um float somente à esquerda ou somente à direita. Because floats can be both right, as the left, and you can obviously make a float just left or just right. Isso pode ser útil quando fazer a limpeza de ambos os lados (” clear:both “) seja problemático. This can be helpful when doing the cleaning of both sides ( "clear: both") is problematic.

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. If it had been given a clear on both sides ( "clear: both") in the example above, the second image would have been pushed down, which ends the text block.

Diferentes técnicas de clear Different techniques of Clear

Assim como tudo em CSS, há mais de um jeito para fazer isso. Like everything in CSS, more than one way to do this.

Usando “ clear ” exatamente onde você precisa Using "clear" exactly where you need

A propriedade CSS “ clear ” faz exatamente o que “diz na caixa”. The CSS property "clear" is exactly what "says the box." O problema reside em onde e como aplicar um elemento à página com a propriedade clear correta. The problem lies in where and how to apply an element to the page with clear property right.

• 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. Apply "clear: both" the item immediately following that you need to be clear. Let us take an example near the top of a web page with layout of the header and footer wide total, with main content and a floating left sidebar to the right. A fim de que o rodapé aparece no lugar certo, você deve limpar a flutuação antes dele. In order that the footnote appears in the right place, you must clear the floating before him. Neste simples exemplo, você pode aplicar aplicar clear:both na própria div do rodapé. In this simple example, you can apply apply clear: both the very bottom of div.

Esta técnica é maravilhosa, já que ela funciona bem sem a necessidade de códigos supérfluos. This technique is wonderful, because it works well without the need for codes superfluous. No entanto, ela às vezes falha em sites dinâmicos. However, it sometimes fails to dynamic websites. 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? And if, for example, you had to add a new page element, above the bottom and therefore below the other content of the page? Agora você precisaria dar um clear neste elemento ao invés de no rodapé. Now you have to give a clear element in this rather than the bottom. Muitas vezes é mais fácil pensar sobre onde é preciso dar um clear ao invés de em qual elemento é preciso dar um clear . Often it is easier to think about where we need a clear rather than on what must be one element is clear.

• 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 />”). Apply "clear" and clear the float in a vacuum. DIVs are very good because, generally, you have no style applied to them (as in an element of paragraph "p" for example) and they have no special feature (as a "<br />"). Onde for preciso limpar o float , apenas insira: <div style=”clear: both;”> </div> . Where need to clear the float, just enter: <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. Use in-line styles is not very "attractive", it is better to make a class "clear" and create a rule that makes the cleaning of the float, but that's only a matter of taste.

O método da DIV vazia: The method of empty DIV:

 ...parte de elemento flutuante. < / div > < div class = "clear" >< / div > < p > ... ... part of floating element. </ div> <div class = "clear"> </ div> <p> ... ahhhh, recebi um "clear"! < / p > ahhhh, I received a "clear"! </ p> 

CSS:

 div .clear { clear : both ; } div. clear (clear: both;) 

“overflow:auto” no elemento pai "Overflow: auto" in the parent element

É 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. It is difficult to explain why, but the implementation of the CSS property "overflow: auto" in the parent element will cause its height is calculated correctly. Ele irá se expandir para englobar os elementos flutuadores ( floats ) ao invés de “dar pau”. It will expand to encompass the entirety floats (floats) rather than "to stick." Isso pode ser muito útil e é muito “limpo”, mas tem alguns inconvenientes. This can be very useful and is very clear "but has some drawbacks. O maior deles é que, frequentemente, não faz sentido usar a regra CSS no elemento pai. The biggest of these is that, often, it makes sense to use the CSS rule in the parent element. 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. Think of the times in which you must give a clear on several elements that have a father in common, in which case it will not vai help.

Outro problema é que você pode querer usar a propriedade “ overflow ” para outros fins. Another problem is that you may want to use the property "overflow" for other purposes. E se você quiser esconder o overflow de uma div , em especial? And if you want to hide the overflow of a split, in particular? Você não pode. You can not. Você terá que englobar a div com outra div para conseguir isso. You will have to include the split with another split to do that.

O hack “ clearfix ” (dar o clear com a pseudo-classe “:after”) The hack "clearfix" (make clear to the pseudo-class "after")

Embora antigo, o artigo do positioniseverything sobre como usar uma pseudo-classe CSS para dar o clear ainda é válido. Although old, the article positioniseverything about using a pseudo-class CSS to make clear is still valid. Explicando rapidamente, a técnica consiste em adicionar um pouco de conteúdo depois do elemento. Explaining quickly, the technique is to add a little of substance after the element. Este pouco de conteúdo (um espaço, geralmente) é que faz o clear funcionar, mas fica oculto do visitante. This bit of content (an area, generally) is making clear the work, but is hidden from the visitor.

Aqui está um código, aplicado em uma classe CSS para qualquer elemento que precise de um clear : Here is a code, applied in a CSS class for any element that needs a clear:

 /* 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 */ / * 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 * / 

O artigo citado alerta que a técnica já está ficando velha e fala sobre “ overflow:auto “. The article quoted warning that the technique is getting old and already talks about "overflow: self." Eu não compartilho da opinião de que a técnica está ficando ultrapassada. I do not share the view that the technology is getting outdated. Esta é completamente diferente da outra técnica de overflow . This is completely different from other technical overflow. Com a “ clearfix “, você aplica a classe no próprio elemento , não no elemento pai. With "clearfix," you apply to class in their own element, not the parent element. 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 . This means you can use it even when it is not a father, this means that you can continue to use it, even if there is a parent element that makes sense, and apply it wondering where the element needs to float a clear.

Outro problema com float : empurrões para baixo (” pushdown “) Another problem with float: pushes down ( "pushdown")

Esta questão merece uma atenção especial, porque frequentemente as pessoas têm problemas com questões de “empurrões”. This issue deserves special attention, because people often have problems with issues of "jerks." Olhando novamente o exemplo dado no início deste artigo, a div do conteúdo principal flutua à esquerda da div da barra lateral. Looking again the example set earlier this article, the split from the main content floats to the left of the split of the sidebar. Esta é uma estrutura comum em muitos blogs . This is a common structure in many blogs.

Quer sejam elementos fixos ou fluidos, ambas as DIVs têm uma largura especificada. Whether fixed or fluids, both DIVs have a width specified. 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”. They supposedly behave themselves as floating elements, or if an element within the area from the main content is the width greater than this whole area (for example, an image very large) if it simply extends through copper and anything that is " No way. " A forma como o IE6 trata isso é bem diferente. The way that treats IE6 that is quite different. 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 . If one element is greater than the width of its parent element, IE6 the sidebar vai simply be pushed down ( "pushdown"), completely breaking the layout.

A solução? The solution? A melhor solução é não colocar elementos com largura maior que a de seu elemento pai. The best solution is not to place elements with width greater than that of its parent element. 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. To better protect, and if your layout works differently (not specify heights), you can work with "overflow: hidden" to hide something that is needed. Ainda há outra solução, que seria usar posicionamento absoluto para posicionar a barra lateral mais à direta. Yet another solution, which would use absolute positioning to position the sidebar for more direct. Lembre-se, entretanto, que posicionamento absoluto retira o elemento do fluxo da página - algo para se levar em consideração. Remember, however, that absolute positioning cut the element of the flow of the page - something to take into consideration.

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 . For some time left on A List Apart an article about making a "false" absolute positioning, Faux Absolute Positioning, which is an interesting reading and addresses a new technique of layout that brings many benefits of absolute positioning, keeping the flow of the page and not going against the "fragility" of the elements to float.

“Quirks” sobre elementos float "Quirks" on elements 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 . Another thing to remember when dealing with IE6 is that if you apply a margin (CSS "margin") in the same sense that the float ( "left" or "right"), it should be double the margin.

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. For IE7, there is a little trick on his peculiar way it fails to lower margins (CSS "margin-bottom") in child elements within floating objects.