Three visual format models: normal Document Stream, relative positioning and absolute positioning, floating

There are three Positioning Mechanisms in CSS: normal Document Stream, floating, and absolute positioning. If no other two Positioning Mechanisms are specified, all the boxes are located in the normal document stream.

Normal Document Stream:

A normal document stream, as its name implies, is based on the order of tags of block-level elements in HTML, like water flow, from top to bottom. Of course, the row elements are arranged horizontally in a row.

Insert a small accumulated knowledge point here.

In-row elements can be horizontally (inner spacing, border. The horizontal size of the element in the row is not affected in the vertical direction, and the width/height of the element in the row is also not affected by the direct definition of the width/height of the element in the row. For an element in a row, its height can only accommodate the content it contains. But, you can increase the height of the element in the row by setting the line height line-height of the element in the row. (Of course, you can set a display: block in the style attribute of an element in the row to convert it into a block-level element .)

 

 

Relative and absolute positioning:

• Relative location (relative): It is a movement relative to the start point, which is changed based on the top and left values. However, whether or not the elements are moved, the elements still occupy the original space. Therefore, moving elements will overwrite the elements. It is still part of the normal document stream, which is essentially different from the next absolute positioning.

 

• Absolute positioning: This is a very useful and often abused CSS technology. Absolute positioning disconnects elements from normal document streams and does not occupy the space of document streams. The layout of other elements ignores absolute positioning. It is offset from the previous located ancestor element based on it. If no ancestor element has been located, it is usually offset based on the HTML element. After absolute positioning, the displayed level Z-index is displayed. The higher the value, the higher the level.
• Fixed positioning (fixed): it is also an absolute positioning. If it is out of the document stream, it will overwrite it. However, it is based on the position of the view and does not change with the scroll bar. (Not supported by IE6)

The following describes their combined usage:

For a nested element, the inner element should be flexibly located near the contained element. You can first include the element position: relative, and then the inner element position: absolute, so that the inner element will be displaced relative to the outer element.

(Many wysiwysiwyg software absolutely positions all elements and positions the elements of each part through precise pixels. However, the problem is also very obvious, and the maintainability is extremely low. Once some behaviors such as font size modification change the element size, the layout will be completely chaotic and you have to perform page reconstruction for this small change. Give up what you see is what you get. It will make you become lazy and complacent .)

 

Floating:

Let's focus on floating.

Float is the most interesting visualization model and is often applied to our actual front-end pages.

The floating element is similar to absolute positioning. It is separated from the document stream and loses the element space of the Document Stream. If left floating occurs, the elements that exit the document flow will move to the left until the left edge of the element is contained. If multiple elements are floating together, all other elements except the first one are located after the previous floating element (that is, its right side ).

If the contained element is not wide enough, the elements that cannot be horizontally arranged will move down until there is enough space. If the height of the floating element is inconsistent, the element is stuck in a higher element. See the image.

 

Also, the floating element causes the height of the contained element to collapse.

Because the floating element is out of the Document Stream, the floating element does not occupy the space of the contained element, and the height of the contained element is not automatically lifted, resulting in collapse. We need to clear the floating point.

1. We can add a new empty element at the end of the element to be included, and apply clear: both to the empty element style. But the disadvantage is also obvious. Clear is only useful for block-level elements, which adds meaningless block-level labels.
2. Apply float to the contained elements. This method is unavailable. If all the methods are floating, the page will be extremely complex.
3. Side effects of using overflow. Overflow is used to declare the style of the overflow content, but it has a "side effect", that is, it will clear the floating element in the element. The disadvantage of using this method is that once the content overflows, the content will be cut off and the floating side effects will appear clearly.
4. Use: After pseudo elements (pseudo classes) to dynamically generate elements and clear floating labels without any meaning. The disadvantage is that it is not compatible with the old version of Internet Explorer.

Generally, 3 and 4 are commonly used. You need to determine how to use them based on the actual situation.

The following describes Method 4 in detail. The CSS code of Method 4 is as follows:

1234567

. clear: After { content :". "; Height: 0; visibility: hidden; display: block; clear: both; }

"." Is a very small character that won't be noticed. To make it invisible, set its height to 0 and its visibility to hidden. Finally, in order to make it a block-level element clear, you need to use the display: block; so that done is ready. Of course, for incompatible old IE, you need to add a class:

1	. Ieclear {ZOOM: 1 ;}

 

I made a general summary for new users, hoping to help you.

Three visual format models: normal Document Stream, relative positioning and absolute positioning, floating