desenvolvimento para web - xhtml, css, padrões da web, usabilidade, acessibilidade, web design, SEO, blogs e tecnologias para desenvolver a web発展途上ウェブ-のX HTML、 C SS、 W eb標準、ユーザビリティ、アクセシビリティ、ウェブデザイン、ソ、ブログやウェブの技術を開発する

Entender o correto funcionamento ea dinâmica da propriedade CSS “float” é fundamental para o desenvolvimento e estruturação de bons layouts para web .正しい理解してCSSプロパティの機能とダイナミクス"フロート"の開発と構造が根本的にウェブの良いレイアウトです。 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.適切なフロートの使い方を身にWebプロジェクトのwebサイトと、一般的には、が非常に重要なため、基本的には、 CSSのfloat型のルールを使用している可能性がテーブルを使用せずにレイアウトを作成（フィードバック） 、これには、たくさんのこのような経済の利点として時間を読み込んでいます、マッチング、 W3Cの基準とそれゆえ一般的にパフォーマンスが増加します。

O que é “Float”?何が"フロート"ですか？

Float é uma propriedade CSS de posicionamento. float型のプロパティは、 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.精通している場合は、印刷メディア事業をすることができますが思うに、同様の方法で、 レイアウトの場所に画像を必要に応じて、周囲のテキストです。

No design para web , uma imagem inserida continua a fazer parte do fluxo da 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 “).これは、変更が行われた場合の大きさや周囲の要素を変更するかどうか、そのページに自動的にreadjusted （ "リフロー" ） 。 Isso difere da página onde os elementos são posicionados de forma absoluta.このページのどこに要素が異なるので絶対に位置します。 Elementos posicionados de forma absoluta são removidos do fluxo da página web .絶対的な位置を削除するための要素の流れからすると、 ウェブページです。 Elementos posicionados absolutamente não afetarão quaisquer outros elementos da página, quer estes estejam em contato, ou não.任意の位置に確実に影響を与える要素はない、ページの他の要素を、彼らは、連絡先かどうか、または特定します。

Para que são usados os floats?山車に使用されるのですか？

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 .以外に単純な例では、画像を配置するなどの横にあるブロックのテキストを、山車のレイアウトを使用してウェブを作成します。

Floats são igualmente úteis para layouts de pequenas instâncias. 屋台は小さな遺体のレイアウトもお役にたちました。 Veja, por exemplo, esta parte de uma web 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.これらの種類のレイアウトを使用して操作できるの相対位置絶対位置に、しかし、要素をfloatです（ CSSプロパティ"フロート" ）は、他の柔軟性があります。 Vamos supor que o tamanho da imagem de um avatar precise ser alterado.レッツと仮定して、アバターのイメージのサイズを変更する必要があります。 Com floats , o box pode ser reestruturado para acomodar um tamanho maior, enquanto um posicionamento absoluto criaria problemas: floatを使うと、再構築を収容できるボックスをオンにすると大きなサイズ、絶対的なポジショニングとして作成問題への取り組み：

Problemas com floats問題が発生フロート

“ Floats são frágeis”. "屋台は壊れやすい。 " Eles são cheios de “contratempos” e cross-browser quirks .彼らは完全な"後退"とクロスブラウザひねりです。 Talvez o mais significativo seja a necessidade de “limpar” floats (propriedade CSS “clear”) em algumas situações.おそらく最も重要な必要性は、 "クリア" 山車 （ CSSプロパティ"クリア" ）をいくつかの状況です。 Primeiro, vejam alguns exemplos de porque alguns floats precisam ser “limpos” e, depois, como fazer esta “limpeza”.第一に、なぜいくつかの山車のいくつかの例を参照しなければならない"クリーン"と入力し、どのようこれを行うには"クレンジング"です。

Arrumar o float para ajustar a altura do elemento pai arrumar 、 float型の高さを調整するには、親要素

Elementos que contêm elementos float não calculam sua altura como é de se esperar. float型の要素を含んでいない要素の高さとして計算されることが予想される。 De fato, se o elemento pai contém apenas elementos flutuadores, navegadores vão renderizar a altura em zero (como se fosse “ height:0 “).実際には、親要素の場合、山車の要素のみが含まれ、ポイントをレンダリングするブラウザはゼロ（と同じように"高さ： 0 " ） 。

Se você der um “ clear ” antes de fechar a tag do elemento pai, você conserta isso.場合に与える"クリア"を閉じる前にタグの親要素は、それを修復する。

Limpar o float para começar uma nova linha フロートクリアして新しい行を開始する

Vamos dizer que você tem uma série de elementos flutuantes.まあ言ってみればシリーズをお持ちの浮動小数点要素です。

Então, digamos que você quer criar uma pausa nesta grade de elementos, a fim de iniciar uma nova linha.それではしたいを作成するに言ってやるが、このグリッドの要素を一時停止するために新しい行を開始する。 Porque, você sabe, iss faz sentido apenas visualmente falando.なぜなら、ご存じのとおり、視覚的にのみ言えば号に意味します。

Dando “ clear ” somente à esquerda ou à direitaを与える"クリア"のみを左または右

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.上記の2つの例は、ジェネリックを使用する方法の例は"クリア"は、 "クレンジング"か、または両方をクリアして右、上の左にします。 Porque floats podem ser tanto à direita, como à esquerda, e você pode, evidentemente, dar um float somente à esquerda ou somente à direita. 山車の両方のために右に左に、と明らかにすることができます。 フロートだけ左または右だけです。 Isso pode ser útil quando fazer a limpeza de ambos os lados (” clear:both “) seja 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.もしそれを明確にしていたの両側に与えられた（ "クリア：両方" ）上記の例では、 2番目のイメージがダウンされていると、これを終了するテキストブロックします。

Diferentes técnicas de clear別のテクニックをクリア

Assim como tudo em CSS, há mais de um jeito para fazer isso.すべてのCSSのように、これを行うには1つ以上の方法です。

Usando “ clear ” exatamente onde você precisaを使用して"クリア"を正確に指定する必要があります。

A propriedade CSS “ clear ” faz exatamente o que “diz na caixa”. CSSプロパティの"クリア"は、まさに"によると、このボックスをオンします。 " O problema reside em onde e como aplicar um elemento à página com a propriedade clear correta.この問題はどこで、どのように適用する要素を使用してページに明確な財産権です。

• 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. 適用する"クリア：両方"のアイテムをすぐに次のことをクリアする必要があります。ご連絡し、上部に一例を挙げると、 ウェブページのヘッダーとフッターのレイアウトを全体の合計は、左の主要なコンテンツと、フローティングサイドバーの右側にします。 A fim de que o rodapé aparece no lugar certo, você deve limpar a flutuação antes dele.脚注が表示されるためには、適切な場所にする必要があります前にクリアして浮動ていた。 Neste simples exemplo, você pode aplicar aplicar clear:both na própria div do rodapé.この単純な例では、適用の適用をクリアすることができます。 ：非常に底部の両方の領域です。

Esta técnica é maravilhosa, já que ela funciona bem sem a necessidade de códigos supérfluos.このテクニックは素晴らしいので、うまく動作を必要とせず、余計なコードです。 No entanto, ela às vezes falha em sites 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?との場合、たとえば、新しいページ要素を追加するには、上記の下に、そのためには、ページの下にある他のコンテンツですか？ Agora você precisaria dar um clear neste elemento ao invés de no rodapé.を明確にする必要がを与えるというより、この要素の下にします。 Muitas vezes é mais fácil pensar sobre onde é preciso dar um clear ao invés de em qual elemento é preciso dar um clear .多くの場合を考えるほうが簡単ではなく、私たちはどのような必要性を明確にしなければならない1つの要素は明らかです。

• 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 />”). 適用する"クリア"をクリアして真空の中で浮く。 divsは非常に良いため、通常、スタイル適用されることはありません（のように段落の要素の" P "例えば）と彼らは特別な機能（として" <br /> "など） 。 Onde for preciso limpar o float , apenas insira: <div style=”clear: both;”> </div> .ここで必要なフロートをクリアして、入力するだけ： <div style="clear: both;"> < /部>です。 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. 使用するラインスタイルではない非常に"魅力的" 、クラスを作る方が良い"クリア"とルールを作成することにより、クリーニングは、 float型が、その味の問題にすぎないという。

O método da DIV vazia:このメソッドの空の領域：

 ...parte de elemento flutuante. < / div > < div class = "clear" >< / div > < p > ... ...部分フローティング要素を作成します。 < / 部> <div クラス = "clear"> < / 部> <p> ... ahhhh, recebi um "clear"! < / p >えーえ、私受け取って"クリア" ！ < /人 > 

CSS: CSSの：

 div .clear { clear : both ; } 領域をクリア （クリア： 両方; ） 

“overflow:auto” no elemento pai "オーバーフロー：オート"は、親要素

É 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.理由を説明することは難しいが、実装は、 CSSプロパティ"のオーバーフロー：オート"は、親要素の高さが正しく計算さが原因です。 Ele irá se expandir para englobar os elementos flutuadores ( floats ) ao invés de “dar pau”.全体を包含することは展開山車（山車）というより"に固執する。 " Isso pode ser muito útil e é muito “limpo”, mas tem alguns inconvenientes.このことが非常に役に立つとは非常に明確な"しかしにはいくつかの欠点がある。 O maior deles é que, frequentemente, não faz sentido usar a regra CSS no elemento pai.これらの最大のは、多くの場合、ことに意味を使用してCSSルールは、親要素です。 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.ザタイムズでは考えを明確にする必要があります。与えるいくつかの要素には、父親の共通点を指定した場合、ヴァイヘルプことはありません。

Outro problema é que você pode querer usar a propriedade “ overflow ” para outros fins.もう一つの問題はプロパティを使用してすることができます"オーバーフローしました"他の目的のためです。 E se você quiser esconder o overflow de uma div , em especial?とは、 オーバーフローを非表示にする場合は、 分割、特にですか？ Você não pode.することはできません。 Você terá que englobar a div com outra div para conseguir isso.を分割する必要がありますには、別の分割を行うことです。

O hack “ clearfix ” (dar o clear com a pseudo-classe “:after”)そのハック" clearfix " （擬似クラスを明確にして"した後" ）

Embora antigo, o artigo do positioniseverything sobre como usar uma pseudo-classe CSS para dar o clear ainda é válido.古いものの、 positioniseverythingの記事については擬似クラスを使用してのCSSを明確には引き続き有効です。 Explicando rapidamente, a técnica consiste em adicionar um pouco de conteúdo depois do elemento.迅速に説明し、この手法は、ほとんどの物質を追加するにした後 、要素を作成します。 Este pouco de conteúdo (um espaço, geralmente) é que faz o clear funcionar, mas fica oculto do visitante.このビットのコンテンツ（エリア、一般に）は、仕事をクリアして、しかしは隠されてからの訪問者です。

Aqui está um código, aplicado em uma classe CSS para qualquer elemento que precise de um clear :次に示すのは、コード、適用されるすべての要素を必要とCSSのクラスを明確に：

 /* 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 */ / *このする必要があります。 ff3は、今すぐ最初の支援のため、この* / 。 clearfix （ディスプレイ： インライン-ブロック; ）です。 clearfix ：した後 （内容： " " ; 表示： ブロック; 高さ： 0 ; クリア： 両方; フォントサイズ ： 0 ; 視程： 隠し; ） / *非表示をより詳しく-マック\ * / * htmlに変更します。 clearfix （高さ： 1 ％ ; ）です。 clearfix （ディスプレイ： ブロック; ） / *エンド隠すよりすなわち-マック* / 

O artigo citado alerta que a técnica já está ficando velha e fala sobre “ overflow:auto “.この記事を引用すると警告して就学許可証の手法は古いしており、すでに交渉については"オーバーフロー：自己です。 " Eu não compartilho da opinião de que a técnica está ficando ultrapassada.私との見解を共有しないことを、この技術は就学許可証の時代遅れのです。 Esta é completamente diferente da outra técnica de overflow .これは、全く異なる他の技術のオーバーフローです。 Com a “ clearfix “, você aplica a classe no próprio elemento , não no elemento pai. " clearfix 、 "を適用する独自の要素をクラスに、特定の親要素です。 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 .この意味することができますれていないときに利用しても、父親は、この手段の使用を継続することができること、たとえには、親要素にする意味では、適用することとする必要がどこに行くの float型の要素を明確にします。

Outro problema com float : empurrões para baixo (” pushdown “)もう1つの問題をfloat型：プッシュダウン（ "プッシュダウン" ）

Esta questão merece uma atenção especial, porque frequentemente as pessoas têm problemas com questões de “empurrões”.この問題を解決する値する特別な注意、しばしば問題が発生したため、人々の問題"の単収縮をします。 " Olhando novamente o exemplo dado no início deste artigo, a div do conteúdo principal flutua à esquerda da div da barra lateral. looking再び以前の例の設定この資料では、山車のメインコンテンツから分割して、サイドバーの左側に分割します。 Esta é uma estrutura comum em muitos blogs .これは、共通の構造の多くのブログです。

Quer sejam elementos fixos ou fluidos, ambas as DIVs têm uma largura especificada.固定または流体かどうか、両方のdivsは、幅が指定されました。 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”. たぶん浮動要素として彼ら自身に振る舞うか、または場合は、要素の表示からのメインコンテンツはこの地域全体の幅より大きい場合（たとえば、画像を非常に大きい） 、ただ単に拡張を通じて、銅とは何か"そんなわけないでしょ。 " A forma como o IE6 trata isso é bem diferente. 800のように扱うことは非常に異なっています。 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 . 1つの要素よりも大きい場合は、その親要素の幅を、 800は、サイドバーに単純に押し下げヴァイ語（ "プッシュダウン" ） 、完全に破壊のレイアウトです。

A solução?解決策ですか？ A melhor solução é não colocar elementos com largura maior que a de seu elemento pai.最善の解決策ではないの要素に幅を置くよりも大きいが、その親要素を作成します。 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.をよりよく保護、およびレイアウトを使用して動作が異なる（未指定ハイツ） 、仕事をすることができます。 "オーバーフロー：隠し"を非表示にすることが必要です。 Ainda há outra solução, que seria usar posicionamento absoluto para posicionar a barra lateral mais à direta.もう一つの解決策はまだありません、これは絶対的な位置決めを使用し、サイドバーの位置をより直接的です。 Lembre-se, entretanto, que posicionamento absoluto retira o elemento do fluxo da página - algo para se levar em consideração.覚えて、しかし、その絶対的なポジショニングの流れの要素を削減するには、ページ-何かを考慮します。

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 .残された時間をいくつかのリストを表示し離れについての記事には" false "絶対的な位置決め、 偽ものの絶対的なポジショニング、これは面白いとアドレスを読書の新しい技術を多くの利点をもたらすレイアウトを絶対位置、の流れを維持すると、ページの特定行く反対する"脆弱性"の要素をfloat型です。

“Quirks” sobre elementos 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 .別のことを覚えては、 800を扱う時に適用した場合、余白（ CSSの"縁" ）と同じ意味では、 floatです（ "左"もしくは"右" ）には、最後に二重の余白にします。

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.をie7では、彼の独特の方法にちょっとした悪さを下げることに失敗するの余白 （ CSSの"縁の下" ）の子要素に浮動オブジェクトです。