desenvolvimento para web - xhtml, css, padrões da web, usabilidade, acessibilidade, web design, SEO, blogs e tecnologias para desenvolver a web 开发Web -的X HTML， C SS的， W eb标准，可用性，无障碍，网页设计，徐，博客和技术开发的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项目，在一般情况，是极端重要性，因为，基本上，是通过规则使用的CSS 浮动可能是撰写布局 ，无需使用表（反馈） ，从而使许多好处，如经济在时间上装载，相匹配的W3C标准，因此，增加的表现一般。

O que é “Float”?什么是“浮动” ？

Float é uma propriedade CSS de posicionamento. 浮法是一个财产的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 “).这意味着，如果改变了在大小，或是否元素你周围的变化，网页会自动调整（ “流” ） 。 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 :例如，见这个网页的一部分：

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.这些类型的布局可以操纵使用绝对定位与相对定位，但要素浮法（ 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:与浮筒，方块，可改组，以容纳面积较大，作为一个绝对定位创建的问题：

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 浮法调整高度的父元素

Elementos que contêm elementos float não calculam sua altura como é de se 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 “).事实上，如果父元素只包含元素浮筒，浏览器会令点零（好像它是“高度： 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.两个例子，上述的例子如何使用通用的“明确”到“清洗” ，或作出明确既要权利，在左边。 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.如果它已获得一个明确双方的（ “明确：双方” ）在上面的例子中，第二次的形象，已被推下，结束该文本块。

Diferentes técnicas de clear不同的技巧明确

Assim como tudo em CSS, há mais de um jeito para fazer isso.一切都像在CSS中，一个以上的方式做到这一点。

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 .往往是比较容易想，我们需要一个明确的 ，而不是什么必须的一个要素是明确的。

• 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. 在使用在线作风，是不是很“吸引力” ，这是更好地使一类“清除”和建立规则，使清洁的浮动，但是这只是问题的口味。

O método da DIV vazia:方法空部：

 ...parte de elemento flutuante. </div> <div class = "clear" > </div> <p> ... ...的一部分，浮动元素。 < /学> <div 级 = "clear"> < /学> <p> ... ahhhh, recebi um "clear"! </p> ahhhh ，我收到了“清除” ！ < / > 

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 ; 能见度： 隐藏; ） / *隐藏来自IE -陆委会\ * / * HTML格式。 clearfix （身高： 1 ％ ; ） 。 clearfix （显示： 座; ） / *年底隐藏来自IE -陆委会* / 

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 .这意味着您可以使用它，甚至当它不是一个父亲，这意味着您可以继续使用它，即使是有父元素，使意识，并运用它不知道那里的元素需要浮法一个明确的。

Outro problema com float : empurrões para baixo (” pushdown “)另一个问题是与浮动：推下来（ “下推” ）

Esta questão merece uma atenção especial, porque frequentemente as pessoas têm problemas com questões de “empurrões”.这个问题值得特别注意，因为人们往往有问题的问题“ jerks ” 。 Olhando novamente o exemplo dado no início deste artigo, a div do conteúdo principal flutua à esquerda da div da barra lateral.期待再次树立的榜样较早前此文章，从分裂为主要内容的花车，以左边的分裂工具栏。 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.的方式对待的IE6是很大的不同。 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 .如果一个元素是大于宽度，其母公司的元素，的IE6工具栏奥钢联只是被推下（ “下推” ） ，完全打破了布局。

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 .有一段时间离开的一份名单，除了一篇文章作出了“假”绝对定位， faux绝对定位，这是一个有趣的阅读和地址的一种新技术的布局带来了很多的好处，绝对定位，使流通的网页，而不是违背了“脆弱性”的各项要素自由浮动。

“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 .另一件事时要记住处理的IE6的是，如果你申请保证金（ CSS的“孖展” ）在相同的意义上说，浮动（或“左”或“权利” ） ，应当双倍保证金。

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的“孖展-底” ）在儿童分子浮动物件。