csswg-drafts/css2/images/longdesc/floatclear-desc.html at c30ee4832e8b782553ffcaf8bdd88470f4e41571 · w3c/csswg-drafts · GitHub

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
  <head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">

    <title>Long description of how floats overlap with boxes in normal
      flow</title>
  </head>

  <body>
      <h1>Long description of how floats overlap with boxes in normal
      flow</h1>

<P>This diagram illustrates a floating image that overlaps the borders
of one paragraph in normal flow: the paragraph borders are clipped by
the non-transparent parts of the image. The second paragraph is
forced below the float by the 'clear' property.

<P>There are two paragraphs in normal flow, each surrounded by a red
border.  A left-floating image causes the final three lines of the
upper paragraph to float along its right side.  The paragraph borders
shine through the margin area of the image box. The non-transparent
part of the image content area clips them, however.

<P>The second paragraph flows normally, starting below the image's
bottom margin. Sufficient "clearance" is added above the top margin of
the second paragraph, so that its border meets the bottom margin of
the preceding paragraph.

<P><a href="../../visuren.html#img-floatclear">Return to image.</a>

  </body>
</html>