CSS floating (float, clear) popular explanation

Early exposure to CSS, but for the floating has always been very confused, may be its own understanding ability is poor, also may be unable to meet a popular tutorial.

A few days ago a finally understand the basic principle of floating, unable to hold oneself back to share

Written on the front.:

Because the CSS more content, a no energy from a to Z to say again, can be targeted to explain.

If the reader to understand the CSS box model, but do not understand for floating, then this article can help you.

A level is limited, this article just tutorial, inappropriate please forgiveļ¼

In this paper, the div element layout for example.

The tutorial begins:

First of all, div is a block level element, exclusive of a row in the page, arranged from top to bottom, also is the legendary flow . The following diagram:

As can be seen, even if the width of the div1 is very small, the page a line can be div1 and div2, div2 will not row in the div1 behind, because the div element is an exclusive line.

Note, the above theory, refers to the standard of div.

Cole thinks, no matter how complex layout, the basic starting point is: “ how in a row to display multiple div elements”.

Obviously the standard flow has been unable to meet the demand, which use the floating.

Floating can be understood as a div element from the standard flow, floating in the standard flow, and the flow is not a level standard.

For example, suppose the div2 floating, it will deviate from standard flow, but div1, div3, div4 still in the standard stream, so the div3 will automatically move upward, occupying the div2 position, to form a stream. As shown in Fig.:

As can be seen from the graph, because floating on div2, so it no longer belongs to standard flow, div3 automatic shift take the place of div2, div1, div3, div4 are arranged in order, become a new flow. Because the floating floating on the standard flow above, so div2 blocked a portion of the div3, div3 seems to “ low ”.

Here div2 is left floating (float:left;), can be understood as floating up left aligned, float right (float:right;) is of course the right arrangement. Here on the left, the right is the page left, right edge.

If we adopted the div2 float right, will be the following effect:

At the right edge of div2 on page arrangement, no longer block div3, readers can clearly see the above div1, div3, div4 composition of stream.

Now we just float a div element, a plurality of.?

Below we put div2 and div3 together with the left floating effect, as shown in Figure:

Similarly, because div2, div3 floating, they no longer belong to the standard flow, so the div4 will automatically move up, and div1 to form a new “ ” standard flow, and the float is floating in the standard flow, so div2 can block div4.

Well, to the point, when the div2, div3 set up a floating, div3 will follow in the wake of div2, do not know the readers have found that, until now, div2 is floating in each case, but did not follow to div1. Therefore, we can draw an important conclusion:

If a div element A is floating, If a A element is floating, Then the A elements will follow in the last element of the boundary ( if a bank is not put these two elements, Then the A elements will be pushed to the next line) ; if a A element is the standard flow of elements, Then A the relative vertical position will not change, That is to say A top and bottom alignment is always the last element.

divThe order is div in HTML code sequence decision.

The end close to the edge of the page is the , end away from the edge of the page is .

In order to help the readers to understand, some examples.

If we have div2, div3, div4 are set to left floating, effects are as follows:

According to the above conclusion, follow a understand again: first, starting from div4 analysis, it is found that the above elements div3 is floating, so div4 will follow after div3; div3 found that the top element div2 is floating, so div3 will follow after div2; while div2 found the above element div1 is the standard flow of element, so the div2 relative vertical position unchanged, the top and bottom alignment div1 elements still. Because is left floating, near the edge of the page on the left, so the left is the former, so div2 on the left.

If the div2, div3, div4 are set to right floating, effects are as follows:

Right and left floating are basically the same, only need to pay attention to before and after the corresponding relationship. Because it is the right of floating, so close to the edge of the page on the right, so the right front, so div2 in the right.

And if we take div2, div4 left floating, effect diagram as follows:

Still according to the conclusion, div2, div4 floating, out of standard flow, so the div3 will automatically move up, and the div1 standard flow. Div2 found the last element div1 is the standard flow of elements, so the div2 relative vertical position unchanged, aligned with the bottom of the div1. Div4 found the last element div3 is the standard flow of elements, so the top of the div4 and div3 bottom alignment, and always correct, because it can be seen from the figure, div3 up, div4 also follow up, div4 always ensure that their top and the last element div3 ( standard flow of elements align bottom ).

At this point, the reader has mastered the congratulations adding floating, but there are clear float, with an upper base clear float very easy to understand.

Through the above study, we can see: the element floating before, is the standard flow, is vertically arranged, and the floating after can be understood as horizontal arrangement.

Clear float can be understood as the broken horizontal arrangement.

Remove floating keyword is clear, the official is defined as follows:


clear : none | left | right | both


none  :  The default value. Allow both sides can have a floating object

left   :  Do not allow the floating object

right  :  Do not allow the right there is a floating object

both  :  A floating object is not allowed

Definition is very easy to understand, but may find it's not so readers practical use.

Definition is not wrong, but it's too vague description, let us be at a loss what to do.

Based on the above basis, if the page is only two elements div1, div2, they are left floating, the scene as follows:

When div1, div2 are floating, according to the rules, div2 will follow the div1 behind, but we still hope div2 can be arranged in the div1 below, just like div1 did not float, div2 left floating.

It is necessary to use clear float time (clear), if only according to the official definition, readers may try to write this: the addition of clear:right in the div1 CSS style;, as div1 is not allowed on the right of the floating element, because div2 is a floating element, it will automatically shift line to meet the rules.

In fact, this kind of understanding is not correct, it does not have any effect. See a verdict:

For CSS clear float (clear) , we must keep in mind: this rule can only affect the use of removal of the element itself, does not affect other elements.

How do you understand? Take the above example, we want the div2 to move, but we are in the div1 element of the CSS style uses clear float, attempts through the floating element clears the right of the div1 (clear:right; div2) to force down, this is not feasible, because the clear float in the div1 call, it only div1, not div2.

According to a conclusion, want to let div2 down, you must use a floating in the div2 CSS style. In the case of the div2 on the left side of the floating element div1, so as long as the use of clear:left in the div2 CSS style; to specify div2 elements to the left is not allowed to float, so div2 was forced down one line.

So if the page only two elements div1, div2, they are all float right? The reader should have to speculate that scene at this time, as follows:

If you want div2 down to div1 below, how to do it?

According to a conclusion, we hope that the move is div2, it must be floating in calls to div2 CSS style, because it can only influence the floating element calls.

Div2 can be seen on the right there is a floating element div1, then we can use the clear:right in the div2 CSS style; to specify the div2 right does not allow for the floating element, so the div2 was forced to down one row, row to the div1 below.

At this point, the reader has mastered the basic principle of CSS+DIV floating positioning, sufficient to meet the common layout.

In fact, not deviate from the readers, as long as the heart, then the complex layout can be done through a summary of the law.

Written on the back.:

Must be a solemn statement, CSS this extremely confusing, especially the browser compatibility issues, a level is limited, this paper is likely to be inappropriate, hope you forgive me.

In fact, I don't want to write such a long article, for readers to understand, always can't help to give more examples.

In order to reduce the psychological pressure of the reader, without any CSS, HTML code, because now a lot of tutorial up is a bunch of CSS code, see vexed, don't read.

Finally, I wish the readers happy, happy knowledge.

This article reprinted from 

Posted by Carl at November 22, 2013 - 4:19 AM