desenvolvimento para web - xhtml, css, padrões da web, usabilidade, acessibilidade, web design, SEO, blogs e tecnologias para desenvolver a web In via di sviluppo web - XHTML, CSS, standard web, usabilità, l'accessibilità, web design, SEO, blog e della tecnologia per sviluppare il web

Entender o correto funcionamento ea dinâmica da propriedade CSS “float” é fundamental para o desenvolvimento e estruturação de bons layouts para web . Capire il corretto funzionamento e la dinamica del CSS di proprietà "float" è fondamentale per lo sviluppo e la strutturazione di buona layout per 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. Imparare a utilizzare correttamente galleggiante su siti web e progetti web, in generale, è di estrema importanza, perché, fondamentalmente, è attraverso le regole CSS usando galleggiante è possibile che compongono i layout senza l'uso di tabelle (feedback), che porta molti vantaggi come economia in tempo di carico, corrispondenti al rispetto degli standard W3C e, di conseguenza, un aumento delle prestazioni in generale.

O que é “Float”? Che cosa è "Float"?

Float é uma propriedade CSS de posicionamento. Float è una proprietà di posizionamento dei 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. Se hai familiarità con i progetti per la stampa, si può pensare, in un modo simile, un'immagine in un layout in cui il testo circostante, se necessario.

No design para web , uma imagem inserida continua a fazer parte do fluxo da página. Come per il web design, un immagine inserita è ancora parte del flusso di pagina. 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 “). Ciò significa che se ci sono delle modifiche in termini di dimensioni o se gli elementi intorno a te cambia, la pagina verrà automaticamente riadattato ( "reflow"). Isso difere da página onde os elementos são posicionados de forma absoluta. Diversa dalla pagina in cui gli elementi sono posizionati in modo assoluto. Elementos posicionados de forma absoluta são removidos do fluxo da página web . Elementi posizionato in modo assoluto vengono rimossi dal flusso di pagina web. Elementos posicionados absolutamente não afetarão quaisquer outros elementos da página, quer estes estejam em contato, ou não. Elementi posizionati assolutamente non influisce sugli altri elementi della pagina, se essi sono in contatto, o meno.

Para que são usados os floats? Per il galleggianti che vengono utilizzati?

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 . Oltre a semplici esempi, come ad esempio ponendo una foto accanto a un blocco di testo, galleggianti sono utilizzati per creare layout per il Web.

Floats são igualmente úteis para layouts de pequenas instâncias. Galleggianti sono utili anche per i layout di piccoli organismi. Veja, por exemplo, esta parte de uma web page : V., ad esempio, questa parte di una pagina 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. Questi tipi di layout può essere manipolato utilizzando il posizionamento assoluto all'interno relativo posizionamento, ma elementi che galleggiano (CSS proprietà "float") sono più flessibili. Vamos supor que o tamanho da imagem de um avatar precise ser alterado. Ipotizziamo che le dimensioni di un avatar bisogno di essere cambiato. Com floats , o box pode ser reestruturado para acomodar um tamanho maior, enquanto um posicionamento absoluto criaria problemas: Con galleggianti, la casella può essere ristrutturata per accogliere un numero maggiore di dimensioni, come il posizionamento assoluto creare problemi:

Problemas com floats Problemi con carri

“ Floats são frágeis”. "Galleggianti sono fragili". Eles são cheios de “contratempos” e cross-browser quirks . Sono pieno di "ostacoli" e cross-browser quirks. Talvez o mais significativo seja a necessidade de “limpar” floats (propriedade CSS “clear”) em algumas situações. Forse la più significativa è la necessità di un "chiaro" galleggianti (CSS proprietà "chiaro") in alcune situazioni. Primeiro, vejam alguns exemplos de porque alguns floats precisam ser “limpos” e, depois, como fazer esta “limpeza”. In primo luogo, vedere alcuni esempi di ragioni per cui alcuni carri devono essere "puliti" e poi come fare questa "pulizia".

Arrumar o float para ajustar a altura do elemento pai Arrumar il galleggiante per regolare l'altezza del genitore elemento

Elementos que contêm elementos float não calculam sua altura como é de se esperar. Gli elementi che contengono elementi di galleggiante non calcolare la sua altezza, come c'è da aspettarsi. 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 effetti, se l'elemento principale contiene solo elementi galleggianti, browser renderà il punto a zero (come se si trattasse di "altezza: 0").

Se você der um “ clear ” antes de fechar a tag do elemento pai, você conserta isso. Se si dà un "chiaro" prima di chiudere l'etichetta del genitore elemento, è la riparazione.

Limpar o float para começar uma nova linha Chiaro il galleggiante per iniziare una nuova riga

Vamos dizer que você tem uma série de elementos flutuantes. Diciamo che avete una serie di elementi galleggianti.

Então, digamos que você quer criar uma pausa nesta grade de elementos, a fim de iniciar uma nova linha. Quindi diciamo che si desidera creare una pausa in questa rete di elementi al fine di avviare una nuova linea. Porque, você sabe, iss faz sentido apenas visualmente falando. Perché, sapete, ISS ha senso solo visivamente parlando.

Dando “ clear ” somente à esquerda ou à direita Di dare "chiaro" solo a sinistra oa destra

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. I due esempi sopra sono esempi di come l'uso generico di "evidente" per la "pulizia", o dare chiare sia a destra, a sinistra. Porque floats podem ser tanto à direita, como à esquerda, e você pode, evidentemente, dar um float somente à esquerda ou somente à direita. Perché galleggianti può essere sia a destra, sinistra, e ovviamente è possibile fare un galleggiante appena appena a sinistra o destra. Isso pode ser útil quando fazer a limpeza de ambos os lados (” clear:both “) seja problemático. Questo può essere d'aiuto quando si fa la pulizia di entrambe le parti ( "chiaro: entrambi") è problematico.

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. Se fosse stato dato un chiaro su entrambi i lati ( "chiaro: entrambi") nell'esempio precedente, la seconda immagine sarebbe stato spinto verso il basso, che termina il blocco di testo.

Diferentes técnicas de clear Diverse tecniche di Clear

Assim como tudo em CSS, há mais de um jeito para fazer isso. Come tutto in CSS, più di un modo per farlo.

Usando “ clear ” exatamente onde você precisa Utilizzando "Cancella" esattamente dove avete bisogno

A propriedade CSS “ clear ” faz exatamente o que “diz na caixa”. La proprietà CSS "Cancella" è esattamente ciò che "dice la casella". O problema reside em onde e como aplicar um elemento à página com a propriedade clear correta. Il problema sta nel dove e come applicare un elemento alla pagina con chiaro diritto di proprietà.

• 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. Applica "chiaro: sia" l'elemento immediatamente dopo che avete bisogno di essere chiari. Prendiamo un esempio vicino alla parte superiore di una pagina web con il layout del intestazione e piè di pagina a livello complessivo, con contenuto principale e di un galleggiante a sinistra barra laterale a destra. A fim de que o rodapé aparece no lugar certo, você deve limpar a flutuação antes dele. In modo che la nota a piè di pagina viene visualizzata nel posto giusto, è necessario azzerare il galleggiante prima di lui. Neste simples exemplo, você pode aplicar aplicar clear:both na própria div do rodapé. In questo semplice esempio, è possibile applicare applicano chiaro: sia la parte inferiore della div.

Esta técnica é maravilhosa, já que ela funciona bem sem a necessidade de códigos supérfluos. Questa tecnica è meraviglioso, perché funziona bene, senza la necessità che i codici superfluo. No entanto, ela às vezes falha em sites dinâmicos. Tuttavia, a volte non riesce a siti web dinamici. 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? E se, ad esempio, è dovuto aggiungere un nuovo elemento della pagina, al di sopra del fondo e quindi al di sotto del altri contenuti della pagina? Agora você precisaria dar um clear neste elemento ao invés de no rodapé. Ora dovete dare un chiaro elemento in questo piuttosto che il fondo. Muitas vezes é mais fácil pensar sobre onde é preciso dar um clear ao invés de em qual elemento é preciso dar um clear . Spesso è più facile pensare a dove abbiamo bisogno di una chiara piuttosto che su ciò che deve essere un elemento è chiaro.

• 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 />”). Applica "chiaro" e di cancellare il galleggiante nel vuoto. DIVs sono molto buone, perché, in generale, non si ha nessun stile applicato a loro (come in un elemento del paragrafo "P" per esempio) e non avere nessuna caratteristica (come un "<br />"). Onde for preciso limpar o float , apenas insira: <div style=”clear: both;”> </div> . Dove necessario cancellare il galleggiante, basta digitare: <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 in linea stili non è molto "attraenti", è meglio fare una classe "chiaro" e creare una regola che rende la pulizia del galleggiante, ma questo è solo una questione di gusto.

O método da DIV vazia: Il metodo di vuoto DIV:

 ...parte de elemento flutuante. < / div > < div class = "clear" >< / div > < p > ... ... Parte del galleggiante elemento. </ Div> <div class = "clear"> </ div> <p> ... ahhhh, recebi um "clear"! < / p > AHHHH, ho ricevuto un "chiaro"! </ p> 

CSS:

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

“overflow:auto” no elemento pai "Overflow: auto" nel elemento principale

É 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. E 'difficile spiegare perché, ma l'attuazione della proprietà CSS "overflow: auto" con i genitori elemento farà la sua altezza è calcolato correttamente. Ele irá se expandir para englobar os elementos flutuadores ( floats ) ao invés de “dar pau”. Si allargherà a comprendere l'intera galleggianti (galleggianti), piuttosto che "a bastone". Isso pode ser muito útil e é muito “limpo”, mas tem alguns inconvenientes. Questo può essere molto utile ed è molto chiaro ", ma ha alcuni svantaggi. O maior deles é que, frequentemente, não faz sentido usar a regra CSS no elemento pai. Il più grande di questi è che, spesso, ha senso utilizzare la regola CSS nel elemento principale. 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. Pensare dei tempi in cui si deve dare una chiara su diversi elementi che hanno un padre in comune, nel qual caso essa non vai aiuto.

Outro problema é que você pode querer usar a propriedade “ overflow ” para outros fins. Un altro problema è che è possibile utilizzare la proprietà "overflow" per altri scopi. E se você quiser esconder o overflow de uma div , em especial? E se si desidera nascondere l'overflow di una scissione, in particolare? Você não pode. Non è possibile. Você terá que englobar a div com outra div para conseguir isso. Si dovranno prevedere la scissione con un altro split a farlo.

O hack “ clearfix ” (dar o clear com a pseudo-classe “:after”) Il trucco "clearfix" (a mettere in chiaro la pseudo-classe "dopo")

Embora antigo, o artigo do positioniseverything sobre como usar uma pseudo-classe CSS para dar o clear ainda é válido. Anche se vecchio, l'articolo positioniseverything sull'utilizzo di una pseudo-classe CSS per mettere in chiaro è ancora valido. Explicando rapidamente, a técnica consiste em adicionar um pouco de conteúdo depois do elemento. Spiegando rapidamente, la tecnica è di aggiungere un po 'di sostanza dopo l'elemento. Este pouco de conteúdo (um espaço, geralmente) é que faz o clear funcionar, mas fica oculto do visitante. Questo po 'di contenuto (uno spazio, in genere) è rendere chiaro il lavoro, ma è nascosta dal visitatore.

Aqui está um código, aplicado em uma classe CSS para qualquer elemento que precise de um clear : Qui è un codice, applicate in un CSS classe per ogni elemento che ha bisogno di un chiaro:

 /* 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 */ / * Questo deve essere il primo perché è ora FF3 sostenere questa * /. Clearfix (display: inline-block;). Clearfix: dopo (tenore: ""; display: block; altezza: 0; chiaro: entrambi; font-size : 0; visibilità: nascosto;) / * Nasconde da IE-mac \ * / * html. Clearfix (altezza: 1%;). Clearfix (display: block;) / * Fine nascondere da IE-mac * / 

O artigo citado alerta que a técnica já está ficando velha e fala sobre “ overflow:auto “. L'articolo citato messaggio di avvertimento che la tecnica si sta già vecchio e parla di "overflow: auto". Eu não compartilho da opinião de que a técnica está ficando ultrapassada. Non condivido l'opinione che la tecnologia sta diventando obsolete. Esta é completamente diferente da outra técnica de overflow . Questo è completamente diverso da altre tecniche di overflow. Com a “ clearfix “, você aplica a classe no próprio elemento , não no elemento pai. Con "clearfix," si applica alla classe nel loro aspetto, non l'elemento principale. 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 . Questo significa che potete utilizzarlo anche quando non è un padre, questo significa che è possibile continuare ad utilizzare, anche se vi è un elemento principale che ha senso, ed applicare chiedendo dove l'elemento esigenze a stare a galla una chiara.

Outro problema com float : empurrões para baixo (” pushdown “) Un altro problema di galleggiamento: spinge verso il basso ( "pushdown")

Esta questão merece uma atenção especial, porque frequentemente as pessoas têm problemas com questões de “empurrões”. Questo problema merita particolare attenzione, perché le persone hanno spesso problemi con le questioni di "cretini". Olhando novamente o exemplo dado no início deste artigo, a div do conteúdo principal flutua à esquerda da div da barra lateral. Guardando ancora una volta l'esempio di prima questo articolo, la scissione dal contenuto principale galleggianti a sinistra della scissione della barra laterale. Esta é uma estrutura comum em muitos blogs . Si tratta di una struttura comune in molti blog.

Quer sejam elementos fixos ou fluidos, ambas as DIVs têm uma largura especificada. Se fisso o fluidi, sia DIVs hanno una larghezza specificate. 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”. Si suppone che si comportano come elementi galleggianti, o se un elemento all'interno della zona dal contenuto principale è la larghezza più grande di tutto questo settore (ad esempio, un immagine molto grande) se semplicemente si estende attraverso rame e tutto ciò che è " Nessun modo. " A forma como o IE6 trata isso é bem diferente. Il modo in cui tratta IE6 che è molto diversa. 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 . Se un elemento è maggiore della larghezza del suo elemento principale, la barra laterale IE6 vai semplicemente essere spinto verso il basso ( "pushdown"), completamente spezzare il layout.

A solução? La risposta? A melhor solução é não colocar elementos com largura maior que a de seu elemento pai. La soluzione migliore è di non luogo a elementi di larghezza superiore a quella del suo elemento principale. 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. Per proteggere meglio, e se il tuo layout opere diverso (non specificare le altezze), è possibile lavorare con "overflow: nascosto" per nascondere qualcosa che è necessario. Ainda há outra solução, que seria usar posicionamento absoluto para posicionar a barra lateral mais à direta. Ancora un'altra soluzione, che utilizzano il posizionamento assoluto per posizionare la barra laterale più diretti. Lembre-se, entretanto, que posicionamento absoluto retira o elemento do fluxo da página - algo para se levar em consideração. Ricorda, tuttavia, che il posizionamento assoluto l'elemento taglio del flusso di pagina - qualcosa da prendere in considerazione.

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 . Per qualche tempo a sinistra su un elenco di là di un articolo di fare un "falso" il posizionamento assoluto, Faux posizionamento assoluto, che è una lettura interessante e gli indirizzi di una nuova tecnica di layout che porta molti vantaggi di posizionamento assoluto, mantenendo il flusso di pagina e non andando contro la "fragilità" degli elementi a stare a galla.

“Quirks” sobre elementos float "Quirks" su elementi 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 . Un'altra cosa da ricordare quando si tratta di IE6 è che se si applica un margine di CSS ( "margine") nello stesso senso che il galleggiante ( "sinistra" o "destra"), dovrebbe essere il doppio del margine.

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. Per IE7, non vi è un piccolo trucco per il suo peculiare modo in cui esso non riesce ad abbassare i margini di CSS ( "margin-bottom") in elementi figli all'interno di oggetti galleggianti.