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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
|
---
title: float
slug: Web/CSS/float
translation_of: Web/CSS/float
---
<div>Свойство float CSS указывает, что элемент должен быть взят из нормального потока и помещён вдоль левой или правой стороны его контейнера, где текст и встроенные элементы будут обтекать его.{{CSSRef}}</div>
<h2 id="Summary">Summary</h2>
<p>CSS-свойство <code>float</code> указывает, что текущий элемент должен быть изъят из обычного flow (потока) и прижат к левой или правой стороне родительского элемента. Текст и inline элементы будут обтекать такой элемент.</p>
<p><strong>Плавающий элемент</strong> - это любой элемент со свойством <code>float</code> отличным от <code>none</code>.</p>
<p>{{cssinfo}}</p>
<p>Поскольку <code>float</code> подразумевает использование блочной модели, это свойство изменяет вычисляемые значения {{cssxref("display")}} в следующих случаях:</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specified value</th>
<th scope="col">Computed value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>inline</code></td>
<td><code>block</code></td>
</tr>
<tr>
<td><code>inline-block</code></td>
<td><code>block</code></td>
</tr>
<tr>
<td><code>inline-table</code></td>
<td><code>table</code></td>
</tr>
<tr>
<td><code>table-row</code></td>
<td><code>block</code></td>
</tr>
<tr>
<td><code>table-row-group</code></td>
<td><code>block</code></td>
</tr>
<tr>
<td><code>table-column</code></td>
<td><code>block</code></td>
</tr>
<tr>
<td><code>table-column-group</code></td>
<td><code>block</code></td>
</tr>
<tr>
<td><code>table-cell</code></td>
<td><code>block</code></td>
</tr>
<tr>
<td><code>table-caption</code></td>
<td><code>block</code></td>
</tr>
<tr>
<td><code>table-header-group</code></td>
<td><code>block</code></td>
</tr>
<tr>
<td><code>table-footer-group</code></td>
<td><code>block</code></td>
</tr>
<tr>
<td><code>flex</code></td>
<td><code>flex</code>, <code>float</code> не оказывает влияния на такие элементы</td>
</tr>
<tr>
<td><code>inline-flex</code></td>
<td><code>inline-flex</code>, <code>float</code> не оказывает влияния на такие элементы</td>
</tr>
<tr>
<td><em>other</em></td>
<td><em>не меняются</em></td>
</tr>
</tbody>
</table>
<div class="note"><strong>Note: </strong>If you're referring to this property from JavaScript as a member of the {{domxref("element.style")}} object, you must spell it as <code>cssFloat</code>. Also note that Internet Explorer versions 8 and older spelled this <code>styleFloat</code>. This is an exception to the rule that the name of the DOM member is the camel-case name of the dash-separated CSS name (and is due to the fact that "float" is a reserved word in JavaScript, as with the need to escape "class" as "className" and escape <label>'s "for" as "htmlFor").</div>
<h2 id="Syntax">Syntax</h2>
<pre class="brush:css">float: left;
float: right;
float: none;
float: inherit;
</pre>
<h3 id="Values">Values</h3>
<dl>
<dt><code>left</code></dt>
<dd>Is a keyword indicating that the element must float on the left side of its containing block.</dd>
<dt><code>right</code></dt>
<dd>Is a keyword indicating that the element must float on the right side of its containing block.</dd>
<dt><code>none</code></dt>
<dd>Is a keyword indicating that the element must not float.</dd>
<dt>
<h3 id="Formal_syntax">Formal syntax</h3>
</dt>
</dl>
{{csssyntax("float")}}
<h2 id="Examples">Examples</h2>
<p><a href="/samples/cssref/float.html">Посмотреть живые примеры</a></p>
<pre class="brush: html"><style type="text/css">
div { border: solid red; max-width: 70ex; }
h4 { float: left; margin: 0; }
</style>
<div>
<h4>HELLO!</h4>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>
</pre>
<div style="border: solid red; max-width: 70ex;">
<h4 id="HELLO!" style="float: left; margin: 0;">HELLO!</h4>
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div>
<h3 id="How_floats_are_positioned">How floats are positioned</h3>
<p>As mentioned above, when an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of it's containing box <em>or another floated element</em>.</p>
<p>In the image below, there are three red squares. Two are floated left and one is floated right. Note that the second "left" red square is placed to the right of the first. Additional squares would continue to stack to the right until they filled the containing box, after which they would wrap to the next line.</p>
<p><img src="/@api/deki/files/4927/=floats.png" style="height: 248px; width: 729px;"></p>
<h3 id="Clearing_floats">Clearing floats</h3>
<p>In the example above, the floated elements are shorter vertically than the block of text they're floated within. However, if the text was not long enough to wrap below the bottom of all the floats, we might see unanticipated effects. If the paragraph above, for instance, only read "Lorem ipsum dolor sit amet," and was followed by another heading of the same style as the "Floats Example" heading, the second heading would appear between the red boxes. Most likely, we want the next heading to be aligned all the way to the left. To accomplish that, we'd need to clear the floats.</p>
<p>The simplest way to clear the floats in this example is to add the {{Cssxref("clear")}} property to the new heading we want to be sure is aligned left:</p>
<pre class="brush:css">h2.secondHeading { clear: both; }
</pre>
<p>However, this method only works if there are no other elements within the same <a href="/ru/docs/Web/CSS/block_formatting_context" rel="internal">block formatting context</a> that we <em>do</em> want the heading to continue to appear next to horizontally. If our <code>H2</code> has siblings which are a sidebars floated to the left and right, using <code>clear</code> will force it to appear below both sidebars, which is probably not what we want.</p>
<p>If clearing floats on an element below them is not an option, another approach is to limit the block formatting context of the floats' container. Referring to the example above again, it appears that all three red boxes are within a <code>P</code> element. We can set the {{Cssxref("overflow")}} property on that P to <code>hidden</code> or <code>auto</code> to cause it to expand to contain them, but not allow them to drop out the bottom of it:</p>
<pre class="brush:css">p.withRedBoxes { overflow: hidden; height: auto; }
</pre>
<div class="note"><strong>Note:</strong> Setting <code>overflow</code> to <code>scroll</code> will also contain any floated child elements, but will show scrollbars no matter the height of the content. Here we're setting <code>height</code> to <code>auto</code> even though that's the default to indicate that the container should grow to accommodate its content.</div>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Box', '#float', 'float')}}</td>
<td>{{Spec2('CSS3 Box')}}</td>
<td>Lots of new values, not all clearly defined yet. Any differences in behavior unrelated to new features are expected to be unintentional; please report.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>No change.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#float', 'float')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/ru/docs/Web/CSS/block_formatting_context">Block formatting context</a></li>
</ul>
|
