📄 visuren.html
字号:
BODY, P, IMG { margin: 2em } </STYLE> </HEAD> <BODY> <P><IMG src=img.gif alt="This image will illustrate floats"> Some sample text that has no other... </BODY></HTML></PRE><P>The IMG box is floated to the left. The content that follows isformatted to the right of the float, starting on the same line as thefloat. The line boxes to the right of the float are shortened due tothe float's presence, but resume their "normal" width (that of thecontaining block established by the P element) after the float. Thisdocument might be formatted as:</P><div class="figure"><P><img src="./images/floateg.gif" alt="Image illustrating how floating boxes interact withmargins."><SPAN class="dlink"> <A name="img-floateg" href="images/longdesc/floateg-desc.html" title="Long description of float and text flow example">[D]</A></SPAN></p></div><P>Formatting would have been exactly the same if the document hadbeen:<PRE><BODY> <P>Some sample text <IMG src=img.gif alt="This image will illustrate floats"> that has no other...</BODY></PRE><P>because the content to the left of the float is displaced bythe float and reflowed down its right side.</div><P>The margins of floating boxes never <ahref="box.html#collapsing-margins">collapse</a> with margins ofadjacent boxes. Thus, in the previous example, vertical margins do not<a href="box.html#collapsing-margins">collapse</a> between the P boxand the floated IMG box.<P>A float can overlap other boxes in the normal flow (e.g., when anormal flow box next to a float has negative margins). When an inlinebox overlaps with a float, the content, background, and borders ofthe inline box are rendered in front of the float. When a block boxoverlaps, the background and borders of the block box are renderedbehind the float and are only be visible where the box istransparent. The content of the block box is rendered in front of thefloat.<div class="example"><P style="display:none">Example(s):</P><p>Here is another illustration, showing what happens when a floatoverlaps borders of elements in the normal flow.<div class="figure"><p><img src="images/float2p.gif" alt="Image showing a floating imagethat overlaps the borders of two paragraphs: the borders areinterrupted by the image."><SPAN class="dlink"> <A name="img-float2p" href="images/longdesc/float2p-desc.html" title="Long description of how floats overlap with boxes in normal flow">[D]</A></SPAN><p class="caption">A floating image obscures bordersof block boxes it overlaps.</div></div><P>The following example illustrates the use of the <a href="visuren.html#propdef-clear" class="noxref"><spanclass="propinst-clear">'clear'</span></a> property to prevent contentfrom flowing next to a float.<div class="example"><P style="display:none">Example(s):</P><p>Assuming a rule such as this:<pre>P { clear: left }</pre><P>formatting might look like this:<div class="figure"><p><img src="images/floatclear.gif" alt="Image showing a floatingimage and the effect of 'clear: left' on the two paragraphs."><SPAN class="dlink"> <A name="img-floatclear" href="images/longdesc/floatclear-desc.html" title="Long description of how floats overlap with boxes in normal flow">[D]</A></SPAN><p class="caption">Both paragraphs have set 'clear: left', whichcauses the second paragraph to be "pushed down" to a position belowthe float -- its top margin expands to accomplish this (see the <a href="visuren.html#propdef-clear" class="noxref"><spanclass="propinst-clear">'clear'</span></a> property).</div></div><h3>9.5.1 <a name="float-position">Positioning the float:</a> the<a href="visuren.html#propdef-float" class="noxref"><span class="propinst-float">'float'</span></a> property</h3><div class="propdef"><dl><dt><span class="index-def" title="'float'"><a name="propdef-float" class="propdef-title"><strong>'float'</strong></a></span><dd><table class="propinfo" cellspacing=0 cellpadding=0><tr valign=baseline><td><em>Value:</em> <td>left | right | none | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a><tr valign=baseline><td><em>Initial:</em> <td>none<tr valign=baseline><td><em>Applies to:</em> <td>all but positioned elements and generated content<tr valign=baseline><td><em>Inherited:</em> <td>no<tr valign=baseline><td><em>Percentages:</em> <td>N/A<tr valign=baseline><td><em>Media:</em> <td><a href="media.html#visual-media-group" class="noxref">visual</a></table></dl></div><P>This property specifies whether a box should float to the left,right, or not at all. It may be set for elements that generate boxesthat are not <a href="#absolutely-positioned">absolutely positioned</a>. The values of this property havethe following meanings:</p><dl><dt><strong>left</strong><dd>The element generates a <a href="#block-box">block</a> box that isfloated to the left. Content flows on the right side of the box,starting at the top (subject to the <a href="visuren.html#propdef-clear" class="noxref"><spanclass="propinst-clear">'clear'</span></a> property). The <a href="visuren.html#propdef-display" class="noxref"><spanclass="propinst-display">'display'</span></a> is ignored, unless it hasthe value 'none'.<dt><strong>right</strong><dd>Same as 'left', but content flows on the left side of the box,starting at the top.<dt><strong>none</strong><dd>The box is not floated.</dl><P><span class="index-def" title="float rules"><aname="float-rules">Here are the precise rules</a></span> thatgovern the behavior of floats:</p><OL><LI> The left <a href="box.html#outer-edge">outer edge</a> of aleft-floating box may not be to the left of the left edge of its <ahref="#containing-block">containing block</a>. Ananalogous rule holds for right-floating elements.<LI> If the current box is left-floating, and there are any leftfloating boxes generated by elements earlier in the source document,then for each such earlier box, either the left <ahref="box.html#outer-edge">outer edge</a> of the current box must beto the right of the right <a href="box.html#outer-edge">outer edge</a>of the earlier box, or its top must be lower than the bottom of theearlier box. Analogous rules hold for right-floating boxes.<LI>The right <a href="box.html#outer-edge">outer edge</a> of aleft-floating box may not be to the right of the left <ahref="box.html#outer-edge">outer edge</a> of any right-floatingbox that is to the right of it. Analogous rules hold forright-floating elements.<LI>A floating box's <a href="box.html#outer-edge">outer top</a>may not be higher than the top of its <ahref="#containing-block">containing block</a>.<LI> The <a href="box.html#outer-edge">outer top</a> of a floating boxmay not be higher than the outer top of any <ahref="#block-box">block</a> or <ahref="#floats">floated</a> box generated by an elementearlier in the source document.<LI>The <a href="box.html#outer-edge">outer top</a> of an element'sfloating box may not be higher than the top of any <spanclass="index-inst" title="line-box"><a name="x46"href="#line-box">line-box</a></span> containing a boxgenerated by an element earlier in the source document.<LI>A left-floating box that has another left-floating box to its leftmay not have its right outer edge to the right of its containingblock's right edge. (Loosely: a left float may not stick out at theright edge, unless it is already as far to the left as possible.) Ananalogous rule holds for right-floating elements.<LI> A floating box must be placed as high as possible.<LI> A left-floating box must be put as far to the left aspossible, a right-floating box as far to the right as possible. Ahigher position is preferred over one that is further to theleft/right.</OL><H3>9.5.2 <a name="flow-control">Controlling flow next to floats:</a>the <a href="visuren.html#propdef-clear" class="noxref"><span class="propinst-clear">'clear'</span></a> property</H3> <div class="propdef"><dl><dt><span class="index-def" title="'clear'"><a name="propdef-clear" class="propdef-title"><strong>'clear'</strong></a></span><dd><table class="propinfo" cellspacing=0 cellpadding=0><tr valign=baseline><td><em>Value:</em> <td>none | left | right | both | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a><tr valign=baseline><td><em>Initial:</em> <td>none<tr valign=baseline><td><em>Applies to:</em> <td>block-level elements<tr valign=baseline><td><em>Inherited:</em> <td>no<tr valign=baseline><td><em>Percentages:</em> <td>N/A<tr valign=baseline><td><em>Media:</em> <td><a href="media.html#visual-media-group" class="noxref">visual</a></table></dl></div><P>This property indicates which sides of an element's box(es) may<em>not</em> be adjacent to an earlier floating box. (It may be thatthe element itself has floating descendants; the <a href="visuren.html#propdef-clear" class="noxref"><spanclass="propinst-clear">'clear'</span></a> property has no effect onthose.)<p>This property may only be specified for <ahref="#block-level">block-level</a> elements (including floats). For<a href="#compact">compact</a> and <a href="#run-in">run-in boxes</a>,this property applies to the final block box to which the compact orrun-in box belongs.<P>Values have the following meanings when applied to non-floatingblock boxes:</P><dl><dt><strong>left</strong><dd>The top margin of the generated box is increased enough that thetop border edge is below the bottom outer edge of any left-floatingboxes that resulted from elements earlier in the source document.<dt><strong>right</strong><dd>The top margin of the generated box is increased enough that thetop border edge is below the bottom outer edge of any right-floatingboxes that resulted from elements earlier in the source document.<dt><strong>both</strong><dd>The generated box is moved below all floatingboxes of earlier elements in the source document..<dt><strong>none</strong><dd>No constraint on the box's position with respect to floats.</dl><p>When the property is set on floating elements, it results in amodification of the <a href="#float-rules">rules</a> forpositioning the float. An extra constraint (#10) is added:<ul><li>The top <a href="box.html#outer-edge">outer edge</a> of the float must be below the bottom outeredge of all earlier left-floating boxes (in the case of 'clear:left'), or all earlier right-floating boxes (in the case of 'clear:right'), or both ('clear: both').</ul> <H2>9.6 <a name="absolute-positioning">Absolute positioning</a></H2><P>In the absolute positioning model, a box is explicitly offset withrespect to its containing block. It is removed from the normal flowentirely (it has no impact on later siblings). An absolutelypositioned box establishes a new containing block for normal flowchildren and positioned descendants. However, the contents of anabsolutely positioned element do not flow around any other boxes. Theymay or may not obscure the contents of another box, depending on the<a href="#stack-level">stack levels</a> of the overlapping boxes.<P>References in this specification to an <span class="index-def"title="absolutely positioned element"><a name="absolutely-positioned"><dfn>absolutely positionedelement</dfn></a></spa⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -