"2" Web stream vs. floating 1

In a twinkling of an eye in the years after, here I wish everyone health, fewer bugs, New Year's atmosphere?!!!

For the past one months, I have spent two-thirds of my time in my hometown, and I have read two books, one called "head first HTML and CSS", in a variety of friends and relatives. Writing code is basically not touched.

Today, I read this book with my previous study of the content, talk about in the Web page on the flow and floating knowledge, but also just some of my own accumulation, there are many imperfect places to welcome you to add!

Flow

The stream is actually the method used by the browser to place HTML elements on the page. That is, the browser starts at the top of the HTML file, displaying the individual elements encountered from top to bottom along the element stream. Somewhere else you might see a name like a document stream, which is consistent with the flow itself. HTML elements are mainly divided into block (block) elements and inline (inline) elements, the flow for the two elements of the placement method is not the same:

Block element: Adds a newline between each block element. So the basic is the block elements from top to bottom.

Inline elements: No line-wrapping, left and right next to each other, the whole is to the bottom of the bottom of the top (just motioned, don't care div).

Detail: When the block elements are placed up and down, their margins will be folded to take the maximum margin height.

The inline elements are arranged around the margin and added to the margins.

Floating

In CSS, float-float is always the most basic and unique property.

First, let's look at the low-order situation where float is not used:

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.

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 of the div2 set floating, so it no longer belongs to the standard flow, Div3 automatically up the displacement div2 position, 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".

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 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, follow the author to understand again: first from DIV4 analysis, it found that the above element div3 is floating, so div4 will follow Div3, Div3 found the above element div2 is also floating, so Div3 will follow the Div2 While Div2 found that the upper element div1 is an element in the standard flow, 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, and div1 constitute 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 div3 moves up after the div4, div4 Always make sure to align the bottom of your top and previous element Div3 ( elements in the standard flow) .

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.

However, the above is explained by the DIV block element as the basis for the float element, but also the important thing is about the inline element, which is the impact of the floating block elements. This section is explained in the next article, and also about the clear property.

"2" Web stream vs. floating 1