Method of arranging two multiple div boxes horizontally (CSS floating clear float-clear/inline)/approach

Recently in a div CSS cut, last night found a long time has not recorded the problem! About compatible with the float property of IE and ff. Take notes while you're awake, first:
One, side by row in the two div style has this situation: IE or FF under the sub-div set float left, if the other sub-Div does not set float left, two browsers will have a difference, the specific one will create a gap. The compatible practice is to set the float property. But remember to set float to clear the float, or the following div will be stacked on the already float Div. I usually write clear float as a separate <div class= "clear" ></div> placed at the bottom of all floating div.
Second, in the above 1 cases need to set the width of the sub-Div, if not set the width of the sub-Div will be the default is the parent Div 100%, so that float will not produce effect. Of course, you can also use the Display:inline method to make two sub-div side, but then the width of the div set will be invalidated (to handle the div brace large can only test the elements inside).
Third, ie in the female div is set to a specific height, if the inside of the sub-div height (with a float to clear the bottom of the div of float to the total height) more than the height of the parent div set, IE will automatically put the parent div, but FF can not, FF in the height of the parent div will remain, The sub-layers inside will overflow outside. Compatibility method: Do not set the height of the parent layer.

Tutorial Start:

The first thing to know is that Div is a block-level element that has a single line in the page, arranged from top to bottom, which is the legendary stream . Such as:

As you can see, even if the width of the div1 is very small, the line in the page can tolerate Div1 and div2,div2 and will not be ranked behind Div1, because the DIV element is exclusive.

Note that these theories refer to the div in the standard flow.

Side dishes think that, no matter how complex the layout, its basic starting point is: " how to display multiple div elements on one line."

It is clear that the standard flow has not been able to meet the demand, it will use floating.

floating can be understood as having a Div The element is detached from the standard flow, floating above the standard stream, and the standard stream is not a hierarchy.

For example, assuming that the div2 floats, then it will be out of the standard flow, but Div1, Div3, Div4 are still in the standard flow, so Div3 will automatically move up, occupy the div2 position, and re-form a stream.

As can be seen, because the div2 is set to float, so it no longer belongs to the standard flow, Div3 automatically up the displacement div2 position (div3 height becomes smaller), Div1, Div3, div4 in order to become a new stream. And because the float is floating on the standard flow, so div2 block a part of the div3,div3 appears to be "short".

Test: You can modify the height and width of the div3, and look at the actual effect, you'll know.

The div2 here is left-floating (float:left;), which can be understood as floating up, left-aligned, right-floating (float:right;) and, of course, on the right. Left and right are the left and right edges of the page.

If we use the div2 to float right , it will be as follows:

At this time div2 by the right edge of the page arrangement, no longer obscure div3, the reader can clearly see the above-mentioned Div1, Div3, div4 composition of the flow.

So far we've only floated one div element, how many?

Let's add the Div2 and Div3 to the left floating, the effect

Similarly, because Div2, div3 float, they no longer belong to the standard flow, so div4 will automatically move up, and Div1 form a "new" standard flow, and the float is floating on the standard flow, so div2 block div4.

Cough, to the point, when the Div2, Div3 set floating, Div3 will follow Div2, do not know if the reader has found, until now, div2 in each case is floating, but did not follow the DIV1. Therefore, we can draw an important conclusion:

if a div element a is floating, if a element is also floating on the previous element, a element will follow the previous element's after Edge ( If one row does not fit the two elements, the A element is squeezed to the next line) ; if a Element is an element in the standard flow, a the relative vertical position does not change, i.e. a the top of the line is always aligned with the bottom of the previous element.

Div the order is HTML Div in Code the order of the.

near the edge of the page is before , away from the edge of the page one end is after .

To help the reader understand, give a few more examples.

If we set Div2, Div3, div4 to the left float, the effect is as follows:

According to the above conclusion, with the side dish to understand again: first from DIV4 analysis, it found that the above element div3 is floating, so div4 will follow Div3, DIV3 found the upper element div2 is also floating, so Div3 will follow after Div2 (DIV3), while Div2 found that the upper element div1 is the element in the standard flow, so the relative vertical position of the div2 is unchanged, and the top is still aligned with the bottom of the DIV1 element. Because it is left floating, the left side is near the edge of the page, so the left side is front, so Div2 is on the left.

If the Div2, Div3, Div4 are set to the right floating, the effect is as follows:

The truth and left floating basically the same, just need to pay attention to the corresponding relationship. Because it is floating right, so the right side is near the edge of the page, so the right side is front, so div2 on the far right.

If we float the div2 and the div4 to the left, the following:

Still according to the conclusion, Div2, Div4 floating, out of the standard flow, so Div3 will automatically move up (Div3 become shorter), and div1 to form a standard flow. Div2 found that the previous element div1 is an element in the standard flow, so the div2 is not changed relative to the vertical position, aligned with the bottom of the div1. Div4 found that the previous element div3 is the element in the standard flow, so the top of the DIV4 is aligned with the bottom of the Div3 and is always true, as it can be seen that the div3 moves up (Div3 is shorter)and div4 moves up,div4 always keep your top and last element Div3 ( elements in the standard flow) the bottom of the alignment .

At this point, congratulations to the reader has mastered the addition of floating, but there are clear floating, there is a basic clear floating on the top is very easy to understand.

Clear float

Through the study above, it can be seen that: before the element floats, that is, in the standard flow, is vertical arrangement, and floating can be understood as a horizontal arrangement.

Clear float can be understood as breaking the horizontal arrangement.

The clear floating keyword is clear and the official definition is as follows:

Grammar:

Clear:none | Left | Right | Both

Value:

None: Default value. Allowed to have floating objects on both sides

Left: does not allow floating objects

Right: Do not allow floating objects

Both: Floating objects are not allowed

The definition is very easy to understand, but the reader may find that this is not the case when actually using it.

There is nothing wrong with the definition, but it is too vague to describe, which makes us overwhelmed.

According to the above basis, if there are only two elements in the page div1, Div2, they are left floating, the scene is as follows:

At this time div1, div2 are floating, according to the rules, DIV2 will follow the div1 behind, but we still hope that div2 can be arranged under the div1, like Div1 no float, div2 left floating.

This is the time to use clear float, and if it's purely official, the reader might try to write: Add Clear:right to the Div1 CSS style, and understand that floating elements are not allowed on the right side of the DIV1, because Div2 is a floating element, Therefore, a row is automatically moved down to satisfy the rule.

In fact, this understanding is not correct, this does not have any effect. See the side of the cake:

for CSS cleared float (clear) , be sure to keep in mind that this rule only affects the elements that use the purge itself, not other elements.

How do you understand it? Take the above example, we want to let div2 move, but we are using the DIV1 element CSS style to clear the float, trying to remove the floating element on the right side of the Div1 (clear:right;) to force the Div2 down, which is not feasible, Because this clear float is called in Div1, it can only affect div1 and cannot affect div2.

According to the side of the cake, in order for Div2 to move down, you have to use float in the div2 CSS style. In this example, the left side of Div2 has a floating element div1, so as long as the clear:left is used in the Div2 CSS style, to specify that the DIV2 element is not allowed floating elements to the left, so Div2 is forced to move down one line.

So if there are only two elements in the page DIV1, Div2, are they all floating right? Readers should now be able to speculate on their own scenarios, as follows:

Now, if you want to move div2 down to Div1, how do you do it?

Also based on the side-dish conclusion, we want to move the DIV2, we must call the float in the div2 CSS style, because the float only affects the element that invokes it.

You can see that there is a floating element on the right side of the Div2 Div1, then we can use Clear:right in the Div2 CSS style, to specify that the right side of DIV2 does not allow floating elements, so div2 is forced to move down one line to the bottom of div1.

So far, the reader has mastered the basic principle of css+div floating positioning, enough to cope with the common layout.

In fact, original aim, as long as the reader attentively experience, and then complex layout can be done by the rule of the summary of the dishes.

。

Method of arranging two multiple div boxes horizontally (CSS floating clear float-clear/inline)/approach