desenvolvimento para web - xhtml, css, padrões da web, usabilidade, acessibilidade, web design, SEO, blogs e tecnologias para desenvolver a web Desarrollo Web - xhtml, css, estándares web, usabilidad, accesibilidad, diseño web, SEO, los blogs y la tecnología para desarrollar la web

Entender o correto funcionamento ea dinâmica da propriedade CSS “float” é fundamental para o desenvolvimento e estruturação de bons layouts para web . Entender el correcto funcionamiento y la dinámica de la propiedad CSS "flotar" es fundamental para el desarrollo y la estructuración de diseños para la buena 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. Aprenda a utilizar correctamente flotar en sitios web y proyectos web, en general, es de extrema importancia porque, básicamente, es a través de las normas usando CSS float es posible que componen diseños sin el uso de tablas (retroalimentación), que trae muchas beneficios tales como la economía en el tiempo de carga, se pongan en venta las con los estándares de W3C y, por ende, un aumento de rendimiento en general.

O que é “Float”? ¿Qué es el "flotador"?

Float é uma propriedade CSS de posicionamento. Float es una propiedad de CSS posicionamiento. 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 estás familiarizado con los proyectos para los medios de comunicación impresos, se puede pensar, de una manera similar, una imagen en un diseño donde el texto circundante cuando sea necesario.

No design para web , uma imagem inserida continua a fazer parte do fluxo da página. En cuanto a diseño de páginas web, una imagen insertada es todavía parte de la corriente de la página. 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 “). Esto significa que si se introducen cambios en el tamaño o si los elementos a su alrededor cambio, la página será automáticamente reajustado ( "reflujo"). Isso difere da página onde os elementos são posicionados de forma absoluta. Esto difiere de la página en la que los elementos están posicionados de manera absoluta. Elementos posicionados de forma absoluta são removidos do fluxo da página web . Elementos colocará de forma absoluta se eliminan de la corriente de la página web. Elementos posicionados absolutamente não afetarão quaisquer outros elementos da página, quer estes estejam em contato, ou não. Elementos posicionados absolutamente no afectará a cualquier otro elemento de la página, ya sea que estén en contacto, o no.

Para que são usados os floats? Para las carrozas que se utilizan?

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 . Además de ejemplos sencillos, como colocar una foto al lado de un bloque de texto, flotadores se utilizan para crear diseños para la web.

Floats são igualmente úteis para layouts de pequenas instâncias. Flota también son útiles para el diseño de cuerpos pequeños. Veja, por exemplo, esta parte de uma web page : Véase, por ejemplo, esta parte de una página 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. Este tipo de diseños se pueden manipular usando el posicionamiento absoluto dentro de la posición relativa, pero los elementos que flotan (CSS propiedad "float") son más flexibles. Vamos supor que o tamanho da imagem de um avatar precise ser alterado. Vamos a suponer que el tamaño de la imagen de un avatar necesidad de ser cambiado. Com floats , o box pode ser reestruturado para acomodar um tamanho maior, enquanto um posicionamento absoluto criaria problemas: Con flotadores, la caja puede ser reestructurada para dar cabida a un mayor tamaño, como un posicionamiento absoluto crear problemas:

Problemas com floats Problemas con los flotadores

“ Floats são frágeis”. "Flota son frágiles". Eles são cheios de “contratempos” e cross-browser quirks . Ellos están llenos de "retrocesos" y transversales navegador peculiaridades. Talvez o mais significativo seja a necessidade de “limpar” floats (propriedade CSS “clear”) em algumas situações. Tal vez la más importante es la necesidad de "claro" flotadores (CSS propiedad "claro") en algunas situaciones. Primeiro, vejam alguns exemplos de porque alguns floats precisam ser “limpos” e, depois, como fazer esta “limpeza”. En primer lugar, ver algunos ejemplos de por qué algunos flotadores deben ser "limpios" y, a continuación se explica cómo hacer esto "limpieza".

Arrumar o float para ajustar a altura do elemento pai Arrumar el flotador para ajustar la altura del elemento padre

Elementos que contêm elementos float não calculam sua altura como é de se esperar. Elementos que contienen elementos de flotación no calcular su altura, como es de esperar. De fato, se o elemento pai contém apenas elementos flutuadores, navegadores vão renderizar a altura em zero (como se fosse “ height:0 “). De hecho, si el padre sólo elemento contiene elementos flotadores, navegadores hará que el punto en cero (como si se tratara de "altura: 0").

Se você der um “ clear ” antes de fechar a tag do elemento pai, você conserta isso. Si usted da un "claro" antes de cerrar la etiqueta del elemento padre, que repararlo.

Limpar o float para começar uma nova linha Borrar el flotador para iniciar una nueva línea

Vamos dizer que você tem uma série de elementos flutuantes. Digamos que usted tiene una serie de elementos flotantes.

Então, digamos que você quer criar uma pausa nesta grade de elementos, a fim de iniciar uma nova linha. Digamos que usted desea crear una pausa en esta red de elementos con el fin de iniciar una nueva línea. Porque, você sabe, iss faz sentido apenas visualmente falando. Porque, usted sabe, iss tiene sentido sólo visualmente hablando.

Dando “ clear ” somente à esquerda ou à direita Al dar "claras" sólo a la izquierda oa la derecha

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. Los dos ejemplos anteriores son ejemplos de cómo el uso genérico de "claro" a la "limpieza", o dan una clara tanto a la derecha, a la izquierda. Porque floats podem ser tanto à direita, como à esquerda, e você pode, evidentemente, dar um float somente à esquerda ou somente à direita. Porque flotadores pueden ser tanto derecho, como la izquierda, y se puede hacer, evidentemente, sólo una carroza hacia la izquierda o la derecha justo. Isso pode ser útil quando fazer a limpeza de ambos os lados (” clear:both “) seja problemático. Esto puede ser útil cuando se hace la limpieza de ambas partes ( "claro: tanto") es problemático.

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. En caso de que se ha dado un claro en ambos lados ( "claro: tanto") en el ejemplo anterior, la segunda imagen habría sido empujado hacia abajo, es decir, hasta el bloque de texto.

Diferentes técnicas de clear Diferentes técnicas de Borrar

Assim como tudo em CSS, há mais de um jeito para fazer isso. Como todo en la CSS, más que una manera de hacer esto.

Usando “ clear ” exatamente onde você precisa El uso de "claro" exactamente donde usted necesita

A propriedade CSS “ clear ” faz exatamente o que “diz na caixa”. La propiedad CSS "claro" es exactamente lo que dice la caja. " O problema reside em onde e como aplicar um elemento à página com a propriedade clear correta. El problema reside en dónde y cómo aplicar un elemento a la página con claro derecho de propiedad.

• 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. Aplicar "claro: tanto" el tema inmediatamente después de que usted necesita para ser claro. Tomemos un ejemplo en la parte superior de una página web con diseño de la cabecera y el pie de ancho total, con contenido principal y una flotante de la izquierda lateral a la derecha. A fim de que o rodapé aparece no lugar certo, você deve limpar a flutuação antes dele. Con el fin de que la nota aparece en el lugar correcto, usted debe borrar la flota antes que él. Neste simples exemplo, você pode aplicar aplicar clear:both na própria div do rodapé. En este ejemplo sencillo, puede solicitar aplicará claro: tanto la parte más baja de div.

Esta técnica é maravilhosa, já que ela funciona bem sem a necessidade de códigos supérfluos. Esta técnica es maravilloso, porque funciona bien sin necesidad de códigos superfluo. No entanto, ela às vezes falha em sites dinâmicos. Sin embargo, a veces falla a sitios web dinámicos. 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? Y si, por ejemplo, usted tuvo que añadir un nuevo elemento de página, por encima de la parte inferior y, por tanto, por debajo de los otros contenidos de la página? Agora você precisaria dar um clear neste elemento ao invés de no rodapé. Ahora tiene que dar un claro elemento en este lugar de la parte inferior. Muitas vezes é mais fácil pensar sobre onde é preciso dar um clear ao invés de em qual elemento é preciso dar um clear . A menudo es más fácil pensar en que necesitamos una más que clara en lo que debe ser uno de los elementos es claro.

• 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 />”). Aplicar "claras" y claro el flotador en el vacío. DIVs son muy buenas porque, generalmente, usted no tiene el estilo aplicado a ellos (como en un elemento de párrafo "p" por ejemplo) y no tienen ninguna característica especial (como un "<br />"). Onde for preciso limpar o float , apenas insira: <div style=”clear: both;”> </div> . En caso de que tenga que borrar el flotador, escribe: <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. Uso en línea estilos no es muy "atractiva", es mejor hacer una clase "clara" y crear una regla que hace que la limpieza de la balsa, pero eso es sólo una cuestión de gusto.

O método da DIV vazia: El método de vacío DIV:

 ...parte de elemento flutuante. < / div > < div class = "clear" >< / div > < p > ... ... Parte del elemento flotante. </ Div> <div class = "clear"> </ div> <p> ... ahhhh, recebi um "clear"! < / p > ahhhh, he recibido un "claro" </ p> 

CSS:

 div .clear { clear : both ; } div. claras (claro: ambos;) 

“overflow:auto” no elemento pai "Overflow: auto" en el elemento matriz

É 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. Es difícil explicar por qué, pero la aplicación de la CSS propiedad "overflow: auto" en el elemento matriz hará que su altura se calcula correctamente. Ele irá se expandir para englobar os elementos flutuadores ( floats ) ao invés de “dar pau”. No se ampliará para abarcar la totalidad carrozas (carrozas), en lugar de "a palo". Isso pode ser muito útil e é muito “limpo”, mas tem alguns inconvenientes. Esto puede ser muy útil y es muy clara ", pero tiene algunos inconvenientes. O maior deles é que, frequentemente, não faz sentido usar a regra CSS no elemento pai. El mayor de ellos es que, a menudo, tiene sentido utilizar el CSS norma de la matriz elemento. 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. Piense en las veces en que usted debe dar una clara en varios elementos que tienen un padre en común, en cuyo caso no se vai ayuda.

Outro problema é que você pode querer usar a propriedade “ overflow ” para outros fins. Otro problema es que puede que quiera usar la propiedad "overflow" para otros fines. E se você quiser esconder o overflow de uma div , em especial? Y si quieres ocultar el desbordamiento de una escisión, en particular? Você não pode. No se puede. Você terá que englobar a div com outra div para conseguir isso. Usted tendrá que incluir la división con otra división para hacerlo.

O hack “ clearfix ” (dar o clear com a pseudo-classe “:after”) El hack "clearfix" (dejar claro que la pseudo-clase "después de")

Embora antigo, o artigo do positioniseverything sobre como usar uma pseudo-classe CSS para dar o clear ainda é válido. Aunque de edad, el artículo positioniseverything sobre el uso de la pseudo-clase CSS para dejar en claro si todavía es válida. Explicando rapidamente, a técnica consiste em adicionar um pouco de conteúdo depois do elemento. Explicar con rapidez, la técnica consiste en añadir un poco de sustancia después de que el elemento. Este pouco de conteúdo (um espaço, geralmente) é que faz o clear funcionar, mas fica oculto do visitante. Este bit de contenido (una zona, por lo general) está dejando claro el trabajo, pero se oculta de los visitantes.

Aqui está um código, aplicado em uma classe CSS para qualquer elemento que precise de um clear : Aquí hay un código, que se aplica en una clase CSS para cualquiera de los elementos que necesita un claro:

 /* 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 */ / * Esto tiene que ser en primer lugar porque FF3 es ahora el apoyo a este * /. Clearfix (display: inline-block;). Clearfix: después (contenido: ""; pantalla: bloque; altura: 0; claro: ambos; font-size : 0; visibilidad: oculto;) / * Oculta de IE-mac \ * / * html. Clearfix (altura: 1%;). Clearfix (display: block;) / * Fin de ocultar IE-mac * / 

O artigo citado alerta que a técnica já está ficando velha e fala sobre “ overflow:auto “. El artículo citado advertencia de que la técnica es cada vez de edad y ya habla de "overflow: auto". Eu não compartilho da opinião de que a técnica está ficando ultrapassada. Yo no comparto la opinión de que la tecnología se está volviendo obsoleta. Esta é completamente diferente da outra técnica de overflow . Esto es completamente diferente de otras técnicas de desbordamiento. Com a “ clearfix “, você aplica a classe no próprio elemento , não no elemento pai. Con "clearfix," le aplicará a la clase en su propio elemento, no el elemento padre. 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 . Esto significa que puede utilizar aún cuando no se trata de un padre, esto significa que usted puede seguir utilizándolo, incluso si hay un elemento que tiene sentido, así como aplicarlo preguntándose dónde el elemento necesario para flotar una clara.

Outro problema com float : empurrões para baixo (” pushdown “) Otro problema con flotador: empuja hacia abajo ( "pushdown")

Esta questão merece uma atenção especial, porque frequentemente as pessoas têm problemas com questões de “empurrões”. Esta cuestión merece una atención especial, porque las personas a menudo tienen problemas con cuestiones de "tirones". Olhando novamente o exemplo dado no início deste artigo, a div do conteúdo principal flutua à esquerda da div da barra lateral. Mirando de nuevo el ejemplo a principios de este artículo, la división del contenido principal flota a la izquierda de la división de la barra lateral. Esta é uma estrutura comum em muitos blogs . Se trata de una estructura común en muchos blogs.

Quer sejam elementos fixos ou fluidos, ambas as DIVs têm uma largura especificada. Ya sea fijo o fluidos, tanto DIVs tienen una anchura especificada. 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”. Ellos, supuestamente, se comportan como elementos flotantes, o si un elemento dentro del área del contenido principal es el ancho superior a todo este ámbito (por ejemplo, una imagen muy grande), si simplemente se extiende a través de cobre y todo lo que sea " De ninguna manera. " A forma como o IE6 trata isso é bem diferente. La forma en que trata a IE6 que es muy diferente. 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 elemento es mayor que la anchura de su elemento, IE6 la barra lateral vai ser simplemente empujó hacia abajo ( "pushdown"), rompiendo por completo el diseño.

A solução? ¿La solución? A melhor solução é não colocar elementos com largura maior que a de seu elemento pai. La mejor solución es no colocar elementos con anchura superior a la de su elemento. 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. Para proteger mejor, y si su diseño funciona de forma diferente (no especifica las alturas), puede trabajar con "desbordamiento: ocultos" para ocultar algo que es necesario. Ainda há outra solução, que seria usar posicionamento absoluto para posicionar a barra lateral mais à direta. Sin embargo, otra solución, que el uso de posicionamiento absoluto a la posición de lateral más directo. Lembre-se, entretanto, que posicionamento absoluto retira o elemento do fluxo da página - algo para se levar em consideração. Recuerde, sin embargo, que la posición absoluta del elemento de corte de la corriente de la página - algo a tener en cuenta.

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 . Desde hace algún tiempo salió en una lista Aparte de un artículo sobre cómo hacer una "falsa" posicionamiento absoluto, Faux Posicionamiento absoluto, que es una lectura interesante y aborda una nueva técnica de diseño que trae muchos beneficios de la posición absoluta, manteniendo el flujo de la página y no ir en contra de la "fragilidad" de los elementos que flotan.

“Quirks” sobre elementos float "Peculiaridades" sobre los elementos de flotación

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 . Otra cosa para recordar cuando se trata de IE6 es que si usted solicita un margen (CSS "margen") en el mismo sentido que el flotador ( "la izquierda" o "derecha"), se debe duplicar el margen.

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. Para IE7, hay un pequeño truco en su peculiar manera que no márgenes más bajos (CSS "margin-abajo") en los niños elementos dentro de objetos flotantes.