blob: 62f8ddf017f9dfa911c4bf218377b92cb590b2e5 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
---
title: float
slug: Web/CSS/float
tags:
- Referencia_CSS
translation_of: Web/CSS/float
---
<p>{{ CSSRef() }}</p>
<h3 id="Resumo" name="Resumo">Resumo</h3>
<p>A propriedade <code>float</code> especifica se um elemento deve flutuar pelo lado direito, pelo esquerdo ou não flutuar, onde os elementos <code>inline</code> envolverão ao redor dele.</p>
<ul>
<li>Valor inicial: none;</li>
<li>Aplica-se a: todos elementos;</li>
<li>Herdado: não;</li>
<li>Valor computado: como especificado.</li>
</ul>
<p>Um <strong>elemento flutuante</strong> é um elemento onde o valor computado é diferente de <code>none</code>.</p>
<p>Note que se você estiver referenciando a esta propriedade do JavaScript como um membro do objeto <a href="pt/DOM/element.style">element.style</a>, você precisa escrever isto em <strong>cssFloat</strong> (veja a lista do <a href="pt/DOM/CSS">DOM:CSS</a>). Note também que para o IE você precisa escrever <strong>styleFloat</strong>.</p>
<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3>
<p>float: left | right | none | <a href="pt/CSS/inherit">inherit</a></p>
<h3 id="Valores" name="Valores">Valores</h3>
<ul>
<li><strong>left</strong> : O elemento flutua pelo lado esquerdo de um bloco;</li>
<li><strong>right</strong> : O elemento flutua pelo lado direito de um bloco;</li>
<li><strong>none</strong> : O elemento não flutua.</li>
</ul>
<h3 id="Exemplos" name="Exemplos">Exemplos</h3>
<p><a href="/samples/cssref/float.html">View Live Examples</a></p>
<pre><html>
<head>
<style type="text/css">
b
{
font-size: 25px;
float:right;
}
</style>
</head>
<body>
<p>
<b>HELLO!</b>
Isto é algum texto. Isto é algum texto. Isto é algum texto.
Isto é algum texto. Isto é algum texto. Isto é algum texto.
Isto é algum texto. Isto é algum texto. Isto é algum texto.
Isto é algum texto. Isto é algum texto. Isto é algum texto.
Isto é algum texto. Isto é algum texto. Isto é algum texto.
Isto é algum texto. Isto é algum texto. Isto é algum texto.
Isto é algum texto. Isto é algum texto. Isto é algum texto.
Isto é algum texto. Isto é algum texto. Isto é algum texto.
</p>
</body>
</html>
</pre>
<h3 id="Notas" name="Notas">Notas</h3>
<p>TODO: deve explicar como os flutuantes se posicionam. Mencionar o <a href="pt/CSS/block_formatting_context">contexto de formatação de bloco</a>.</p>
<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3>
<ul>
<li><a class="external" href="http://www.w3.org/TR/CSS1#float">CSS 1</a></li>
<li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-float">CSS 2.1</a></li>
</ul>
<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h3>
<table class="standard-table">
<tbody>
<tr>
<th>Navegador</th>
<th>Versão mais antiga</th>
</tr>
<tr>
<td>Internet Explorer</td>
<td>4</td>
</tr>
<tr>
<td>Netscape</td>
<td>4</td>
</tr>
<tr>
<td>Opera</td>
<td>3.5</td>
</tr>
</tbody>
</table>
<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h3>
<p>{{ Cssxref("clear") }}, {{ Cssxref("display") }}, {{ Cssxref("position") }}, {{ Cssxref("float") }}</p>
<p><span class="comment">Categorias</span></p>
<p><span class="comment">Interwiki Language Links</span></p>
<p>{{ languages( { "en": "en/CSS/float", "fr": "fr/CSS/float" } ) }}</p>
|
