CSS floating principle

CSS float is one of the most powerful flexibility features in web design. This document introduces CSS
The basic principles and Behavioral Features of float, and the bugs of various float features of the timer are introduced.

Content

• Basic floating principle
• How float is implemented
• Where the floating starts
• Horizontal floating Stack
• Reverse floating
• Clearing floats

Basic floating principle

Any elementElement

Can be floating. Paragraphs, Div, list, tables, and images can all be moved. In fact, even imagesSpan
AndStrong
The built-in elements of such rows can also be floating well.

Any statement isFloat
Is automatically set as a "block-level element ",
This indicates that it can have the declarative "width" and "height" attributes. In fact, floats is currently required to have a declarative width, but this is not the thinking of modern browser makers
And W3C and began to agree to this practice. Most people now think that float with no specified width should be scaled to the width of the floating content. Therefore, a float with an image inside will
As wide as an image, a floating with text will be as wide as the longest text line in the floating.

In the floating rule of css2.1, the following describes: "IfWidth
IsAuto

The calculated value isShrink-tofit
Scale to the appropriate width. "
All modern browsers have done this except ie5/MAC. Unless float has a specified width, the browser will become hundreds of errors. Currently, most smart coding staff will allow browsers to scale their
Floats with no width attribute,
And use a hidden knowledge dedicated to ie5/MAC width. This may not be clever, but it is a very small number of browsers that cannot meet this specification, and Mac users have several better options.
Ms has stopped support for ie5/Mac, so it is too costly to seek useful features such as scaling and packaging floating, so that only ie5/Mac users will not see the wrong floating.

How float is implemented

Floating "removed from the process ",
But unlike the absolute element (hierarchy), floating is directly displayed after the last block element in front of them (just like a block box ). If the floating is in a "Row block ",
It is placed horizontally at the top of the row block. In addition, the floating and absolute elements are similar. The original block boxes completely ignore the floating and AP elements. The knowledge of static block boxes should be "followed" one by one.
As if no float is not there.

The following is minimal code for the example graphic:

<div style="float:left; width:40%;"><p>Float text</p></div>
<p>
Paragraph text outside the float
</p>

The preceding example shows how the row box is shortened in a floating state. You can place row elements (such as text and images) on a floating edge and continue under it, as if using a good old style (No
Expired) attribute of the image "align = left ". Floating is much more flexible than this.

It is a common misunderstanding that the block elements behind a float will be set to be placed below the float. In fact, this is only true for the "Row boxes" inside the block elements.

Do you still remember that the floating point I mentioned was removed from the document processing process? The standard requires that the row boxes behind a float are scaled to keep the row boxes in the external open area. This indicates text and in-row
Images will never be float, unless one or two of them are in an independent, specified location container. This means that if a float is nested in an absolute position element, and the AP element is set
To overwrite a paragraph, the row box in the paragraph will not be float or shortlisted because of their different context environments. In addition, the text is indeed overwritten by the floating.

A common error in floating is that text is kept outside the floating boundary. It does not take effect to place padding or set the boundary for the Section following the float, because these attributes are applied in
Follow the left of the paragraph after the float. The correct method is to set the margins for the floating itself, so that the row box can be correctly displayed, the floating is greater than it is displayed, and the corresponding shortening of them.
Most float operations generally obtain such boundary information from the edge and bottom of the closest text. The floating above has a small right boundary.

At the same time, the block boxes behind the float are only covered by the float (even if their content has been moved to the edge ). If the floating is set to a very high value, it can block a large number of stacked block boxes, just like
The second one is as follows:

<div style="float:left; width:30%;">
<p>Left float text</p></div>
<div> <!-- first block box -->
<div style="float:right; width:150px;">
<p>Right float text</p>
</div>
<p>Text following the right nested float</p>
</div>
<p>Paragraph</p> <!-- second block box -->
<p>Paragraph</p> <!-- third block box -->

This figure shows how Floating covers multiple block boxes.

As shown above, another floating behavior is their "direction ". When a float is defined, a direction value is always given. ("Left" or "right"), for example: div {
Float: Left;}. These values are easily moved to the specified boundary of the container box.

Occasionally, float beginners try to use floating values, such as {float: up;} or {float: botton ;},
However, these values are invalid and are not included in the floating standard. People can always look forward...

Where the floating starts

If one is floating between two boxes, it places the upper boundary of the box under the front box and moves it to the left (or right ), until it reaches the boundary of external container elements, usually
Is the <body> element.

If the floating is nested in the second block box, and the container box is not filled with a border box, the floating rendering style is the same as that of the floating box. However, if these boxes are separated by margins
The Floating Top boundary starts from the intersection of one box and the other. In the following example, The right top boundary of the block box is displayed, but the left margin of the float on the left has been moved to display the default action. :

<p>Paragraph</p> <!-- first block box (complete) -->
<div style="float:left; width:30%;">
<p>Left float text</p></div>
<div> <!-- second block box -->
<div style="float:right; width:150px;">
<p>Right float text</p>
</div>
<p>Text following the right nested float</p>
</div>

This figure shows that float may be placed in different locations.

Horizontal floating Stack

If the left float is placed on the upper left foot of the container, and then follows the same floating direction, the float will be placed on the upper right foot of the container, and then moved to the left, when the boundary is extended to the right of the first floating
Stop.

The last behavior allows us to create a full row of floats, each of which is placed on the right side of the previous one (or the left side if {float: Right ;}).
Similarly, when a row does not have enough space, the extra floats goes round to the next row, just like the element in the row. This is very convenient for creating a simple image that can be clicked, because the matrix is automatically adjusted.
To the screen size, simply go around when necessary.

The following is a row of color float left. The float at the top left Appears first in the source code, and the last at the bottom right. They all have a small margin to look better. Try to make the browser one smaller
Observe that the floating row is bypassed to use the window size.

Float 1 float 2 float 3 float 4 float 5 float 6 float 7 float 8 float
9 float 10 float 11 float 12 float 13 float 14 float 15

The above float will be bypassed to use any screen size. Note that the text of the paragraph (invisible) below is also adjusted to use the floating arrangement changes. This paragraph actually starts from the place where the first floating starts,
This fact is not obvious only when the paragraph text is visible. The section in has a border box background to display the actual position.

If float is set to "right" rather than "Left", its behavior is the same, and the knowledge float starts from the right, not from the left, subsequent floats are added to the end of the Left row instead of the right. In either case,
The loop is the same unless the float bugs causes the difference.

In this way, the floating in a container is first moved to the top space that it can reach (in the direction of its positioning ), then move backward according to the set float until it reaches the container's boundary, or
To another floating point. Each Continuous Floating operation is the same, until one floating operation fails to find enough space in another floating level. In this way, it will be forced to stop to the bottom of another floating
And then slide as before.

Float 1 float 2 float 3 float 4 float 5 float 6 float 7 float 8 float
9 float 10 float 11 float 12 float 13 float 14 float 15 float 16 float
17 float 18 float 19 float 20

Warning! Note that the floating height above is not the same. When a float is placed in the second row following the first row, its view slides to the boundary and is stopped when the first float is reached. When there are many irregularities
This can cause ugly situations when floating. The above float includes some higher float than others.

Narrow down your browser to test with different screen widths.

When chasing a large simple graph matrix, you must ensure that all float has the same height, or the page can be easily reassembled by the derailed float.

All examples in this article use special processing to adapt to the disadvantages of ie5.x/win box mode. Special processing is required due to border and fill.

Reverse floating

Clearing floats

The most obscure and incomprehensible part of floating is described below.

Review the static box following the float. These boxes only ignore floating, and are arranged behind the previous static box. Suppose you have a clear attribute for the following box,
{Clear: Both ;}. This is to expand the top margin of the box to push it down until the floating bottom is cleared. In other words, the top margin of the box to be cleaned (no matter what it was previously set
Value) will be added to the length of the box to be cleaned up by the browser.

The result is that a cleaned box cannot be kept in the same horizontal position as the front floating. It must appear below it. The example shows the effect.

Shows how to clear a float below a box.

Remember, float is not actually included in a block box, even in the source code. Make sure that the starting point of the floating screen is determined by its nested position.
It is expanded on the container box, just like an absolute element. Only the row boxes (such as text) containing the element in the row need to be concerned about where the floating is displayed.

The standard method for encapsulating a nested floating external container is to put a complete "cleaned" element at the end of the container:

<div> <!-- float container -->
<div style="float:left; width:30%;"><p>Some content</p></div>
<p>Text not inside the float</p>
<div style="clear:both;"></div>
</div>

Because the DIV is not floating, the container must recognize it and encapsulate it. Because of the top margin (because the "clear" attribute is added by the browser), The DIV pulls the bottom boundary of the container to
Bottom.

Indeed, this is an odd method, but that's the standard. However, there is a W3C discussion about adding a container to automatically encapsulate a floating rule. This makes it easier.

In fact, the IE box opera7 has automatically encapsulated nested float, which is different from the standard. Opera6 is not like this, so it seems that opera is following the non-standard path of Ms.

You can also use {clear: Left;} or {clear: Right ;}.
This allows an element to clear the left-side float without affecting the right-side float, or vice versa. To use such control, you need considerable imagination.

In general, clearing can be done well, but sometimes it may cause a small error, which is entirely caused by IE.