CSS positioning layout display/float/position relationships/differences between attributes and how to use the value-taking behavior mechanism

Float:left|right; Automatic line wrapping can be arranged automatically, but clear is required to fit the float;
Display:inline-block; There are times when you can replace float to achieve the same effect.
position:absolute|relative; To cooperate with top,left and other positioning;

Position:absolute causes the element to break out of the document stream, the positioned element is equal to not occupy any position in the document, renders at another layer, and can be set z-index. The layer effect of PS is position:absolute.

Float also causes the element to detach from the document stream, but also occupies a position in the document or container, squeezing the document flow and other float elements left or right, and may result in a newline. The text wrapping layout effect of the picture is float.

Display's inline-block does not detach from the document Stream, embedding the block element as a large character within the document stream, similar to the IMG or input default effect.

===================================================

In fact, this answer is completely unanswered, because the questioner says:

Instead of explaining each concept, just talk about the difference in application.
What is the scope of application? or under what circumstances would it be preferred?
Even though you can achieve a certain effect

But what I'm trying to answer is that the three-way results are quite different, and only the best decisions can be made by fully understanding their typography.

Float:left|right; Automatic line wrapping can be arranged automatically, but clear is required to fit the float;
Display:inline-block; There are times when you can replace float to achieve the same effect.
position:absolute|relative; To cooperate with top,left and other positioning;

position

1. Position property values: Static (default), relative, absolute, fixed, inherit.
2. Postision:static; always in the position given by the document flow. It doesn't seem to work, but it can quickly de-locate and invalidate the Top,right,bottom,left value. You can try this method when switching.
3. In addition to the static value, Z-index does not work until the other three values are set. (To be exact, Z-index only works on the anchor element)
4. Position:relative and absolute can be used for positioning, the difference is that the former Div is also a normal document flow, the latter is already out of normal document flow, not occupy space position, will not open the parent class. The location origin relative is relative to its default position offset in the normal flow, the space it originally occupies remains reserved; Absolute is not static relative to the first position property value. So set the Position:absolute, the property value of its parent class should be noted, and Overflow:hidden can not be set, because it is not a normal document flow, does not occupy the height of the parent class, there will be no scroll bar.
5. Fixed old version IE does not support, but is very useful, the location of the origin of the browser window, and can not change. Commonly used in Header,footer, or some fixed suspension div, with the scroll bar scrolling stable and smooth , much better than JS. Fixed can have a lot of creative layout and function, compatibility is the problem.
6. Position:inherit. Specifies that the value of the position property be inherited from the parent class, so this property is also inherited. However, this property value is not supported by any version of IE.

Float

1. Float Property Value: None (Default), left, right, inherit.
2. Float:left (or right) floats to the left (or starboard) until its edge touches the containing box or another floating box. and out of normal document flow, it is ignored by the block box within the normal document flow. Does not occupy space, the parent element cannot be held open.
3. Any element can float, and a floating element generates a block-level box , regardless of its own element. Therefore, it is not necessary to set display:block for floating elements.
4. If floating non-replacement elements, specify a definite width, otherwise they will be as narrow as possible. (What is a replacement element?) Based on the characteristics of the element itself, the (X) img, input, textarea, select, Object in the HTML are the replacement elements, none of which have actual content. X Most elements of HTML are non-replaceable elements that they tell the browser directly and display. ）

((Don't want to get out of the way to clean up floating--| |, or less ...)

1. The most straightforward clear property, which indicates which side of the box should not be next to the floating box. This property is for the element itself, by automatically increasing the upper margin for the element (CSS1 and CSS2), or by increasing the clear space above the top margin, and the margin itself does not change in the way (css2.1). A clear flaw is the possibility of adding extra meaningless tags.
2. By floating the parent class, you can also clean up the sub-class floats and open the space. It's kind of like a negative negative. But the principle should be that floating elements are also laid out according to the flow of documents, except that they are another separate document flow, unlike normal document flow, which temporarily calls it floating document flow?
3. Haslayout and BFC can both be cleaned and floated. overflow:hidden;zoom:1;)))

Display

1. Display property values: None, inline, inline-block, block, table related attribute value, inherit.
2. The Display property specifies the type of box that the element should generate. any element within a document is a box, block box, or inline box.
3. Display:none and Visiability:hidden can hide Div, the difference is a bit like absolute and relative, the former does not occupy the space of the document, the latter still occupy the position of the document.
4. Display:inline and blocks, also known as inline elements and block-level elements . The difference is that the block exclusive row, usually vertical layout in the browser , you can use margin to control the spacing between block-level elements (there is a problem of margin merging, only the vertical margin of the block box in the normal document flow will occur in the margin merge. Margins between inline boxes, floating boxes, or absolute positioning are not merged . While inline is horizontally laid out, the vertical margin and padding are invalid , the size is the same as the content, and cannot be set to a wide height. Inline is like a plastic bag, what is the content, how it looks, block is like a box, has a fixed width and height.
5. Inline-block is somewhere between the two.
6. Table-related property values can be used to center vertically, with a general effect.

Positioning mechanism

1. The above three properties belong to the CSS positioning property. CSS three basic positioning mechanism: normal flow, floating, absolute positioning.

Just pull some center layout:

1. Wide-height fixation can be used with negative margin: CENTER{TOP:50%;MARGIN-TOP:-HEIGHT/2;LEFT:50%;MARGIN-LEFT:-WIDTH/2;} Say now that this method is slightly ripped, if the width of the high know, directly calculate the value of x, set a margin:x; just fine, so much code, boring. So do not look at the online code, can contributors Jane, there is no pattern.
2. element with wide height not fixed: center{display:inline-block}, parent class set {Text-align:center}
3. Vertical Center Table-cell don't say it.
4. {Line-height:height;vertical-align:middle;}
5. {Position:absolute;top:0;bottom:0;margin:auto} do not forget to target the parent class {position:relative;}

the relationship between Positon and display

Elements are divided into inline elements and chunk elements (and of course, there are other), there is a very important common sense in inline elements, that is, the inner two elements are not allowed to set the style of the chunk elements, for example: Width | Height

Relative: What type of the original is still what type.

Absolute | Fixed: The element is reset to the chunk element, for example: To specify a size for the span element, and to absolutely locate

<span style= "Position:absolute; width:100px; height:50px; " >span</span> This is exactly right,

<span style= "Position:absolute; Display:block; width:100px; height:100px; " >span</span>, the display:block here is superfluous.

The interrelationship between position and float

If an element is set to position:absolute | fixed, then the element cannot set float. This is a common sense point of knowledge because it is two different streams, one is a floating stream and the other is "positioning the stream (this is the name of yourself, hehe)".

But relative can. Because the space it originally occupies still occupies the document stream.

Both Position:relative and Position:absolute can change the position of the element in the document, and setting position:relative or Position:absolute allows the element to activate left, top, right, Bottom and Z-index properties.

Although the Web page looks like a planar two-dimensional structure, it actually has a z-axis, the z-axis is controlled by Z-index, and by default all elements are in the z-index:0 layer, which is the document flow . Setting position:relative or Position:absolute will cause the element to float (just like in-game concepts-multilayer layers), that is, Z-index is greater than 0, and it will change the flow of documents in normal situations. The difference is that position:relative will keep himself in z-index:0 the position of the layer, but its actual position may deviate from the original position in the document flow due to the setting of left, top, right, and bottom values, but will not affect the position of other elements still in the z-index:0 layer . The Position:absolute is completely out of the document flow and no longer retains the placeholder at the z-index:0 layer, with its left, top, right, and bottom values relative to its nearest location – the position is set: Relative or Position:absolute ancestor elements, if the ancestor elements are not set position:relative or Position:absolute, then relative to the BODY element.

In addition to position:relative and position:absolute,float can also change the flow of the document, except that the float property does not let the element "float" to another z-index layer , it still lets the element in the z-index:0 Layer arrangement, float unlike position:relative and position:absolute, it cannot precisely control the coordinates of an element through the left, top, right, and bottom properties, but only through Float:left and Float:right to control elements in the same layer "left float" and "right float". Float changes the normal flow of documents, affecting the surrounding elements .

Another interesting phenomenon is that position:absolute and float implicitly change the display type , regardless of the previous type of element (except Display:none), as long as the position:absolute is set or Any of the floats will let the elements appear display:inline-block: You can set the length width , the default width does not fill the parent element. Even if we explicitly set display:inline or Display:block, it is still invalid (the double margin bug under float in IE6 is solved by adding display:inline). It is important to note thatposition:relative does not change the display type.

1. The effect of position on float:float can be said to define a positional relationship between sibling elements, and the position of the floating element relative to the parent element is determined to be invariant: position based on position:static/relative, To the left or right side (a possible error is that floating elements are floating in the upper-left or upper-right corner),
Thus, the effects of position:static and position:relative and float can be superimposed,
However, the Position:absolute, position:fixed, and the two positional properties depend on references outside of their own elements, which will render the effect of float non-expressive.

2, the impact of floating elements on the text: the basis of the floating concept is the picture mixed, so the peer element in the typesetting if the floating element and non-floating elements occur between the overlay, regardless of who covered who, non-floating elements within the text will be squeezed away, as in the following example:

. elm{width:100px; height:50px;background:green; border:1px solid red; }
. Lf{float:left;}

Float
No float, be squeezed away

3. The effect of floating elements on the parent element: The parent element of the floating element loses the block height, even if the height is defined, it cannot affect the layout of its sibling floating elements and their floating child elements, by default, if the parent element does not have a height defined, the content of the parent element will open up the parent element to the adaptive Block height effect, floating elements cannot open the block height of their parent element.

4. The floating element affects itself : The floating element will be laid out in the form of Inline-block (haslayout), even if he is set to Display:inline, so that when the default width is automatically expanded to 100%, the element floats. The width is supported by the element content, and the elements that have no high-width attributes can also be defined as high-width, and if overlapping, floating elements will be superimposed on non-floating sibling elements (such as having a larger z-index value);

5. The relationship between display, position and float:1. If display equals none, the client must ignore position and float. In this case, the element does not produce a box. 2. Otherwise, if position equals absolute, both display and float are forced to none (List-item remains unchanged). The position of the box is determined by the boundary offset. 3. Otherwise, if float is not equal to none or the element is a root element, display is forced to block (List-item remains unchanged). 4. Otherwise, use the specified display property. 1, absolute positioning completely out of the ordinary flow, so the absolute positioning elements can not be set up with the normal flow of interaction (normal flow can affect absolute positioning, absolute positioning does not affect the normal flow), in some adaptive layout scenarios, absolute positioning there are some defects (need more limiting factors, very inflexible). If you want to use absolute positioning to achieve the same effect as float or inline-block, it is generally not recommended to use absolute positioning.
2, for the float, this property is not used to do layout (preferred to typesetting), but CSS2.1 seems to have this attribute to meet some specific needs, all have a floating layout. The advantage of floating relative absolute positioning is that it can affect the inline layout by default, clearing the float through clear can also affect the block layout and can establish good interaction with the normal flow. And the float itself is out of the ordinary flow, in the element's horizontal positioning compared to inline-block more flexible, and inline-block horizontal positioning is more orderly.
3, Inline-block, this attribute is not used for layout (preference to typesetting), but before the CSS3 popularization, it is also very useful. The box of the element is formatted in the row box, in the order corresponding to the order one by one in the source HTML. At the same time, this element does not break out of the normal stream, which has a greater advantage than floating, it can interact with the normal flow naturally, without the need to use other properties. And compared to floating, the vertical alignment between adjacent elements, inline-block more flexible than float, float format has a rule is that the higher the better (so often shown as the top alignment), and Inline-block in-line format, with more flexible vertical alignment. Application:
If you use a float, clearing the float will be a side effect, and if you don't have a good html/css structure, clearing the float is a complex matter.
Inline-block Although the removal of floating things, but there will be another side effect, that is, white space character problems. The solution to this problem is also very painful, because after all, Inline-block is not a layout attribute, it is just an inline level block container box. At the same time, as a formatting problem in the IFC environment, vertical centering and high row problems can also be a side effect. Other:
In fact, using tabular table layouts is a very powerful method in CSS2.1. Table layout in the equal height, the same column, such as wide alignment, vertical center alignment above the advantages of other methods difficult to match. Even in adaptive scenarios, the flexibility of table layouts is excellent. Float:left|right; Automatic line wrapping can be arranged automatically, but clear is required to fit the float;
Display:inline-block; There are times when you can replace float to achieve the same effect.
position:absolute|relative; To cooperate with the positioning of top,left, for example:
<body>
<style type= "Text/css" >
div {border:1px solid red; margin:1px;}
Div Div {border:1px solid blue;}
</style>
<div>
<div style= "float:right;" >float 1</div>
<div style= "float:right;" >float 2</div>
<div style= "Clear:both; border:0; " ></div>
</div>
<div style= "text-align:right;" >
<div style= "Display:inline-block;" >inline Block 1</div>
<div style= "Display:inline-block;" >inline Block 2</div>
</div>
<div style= "position:relative;" >
<div style= "Position:absolute; right:0px; " >position 1</div>
<div style= "Position:absolute; right:50px; " >position 2</div>
</div>
</body>

Above is the float, the middle is inline-block, below is the position, can see:
1. When the right (right float), float is in order, the first to write the row to the right; The Inline-block remains left and right in the same order.
2. In some browsers (in Firefox above), blank lines or spaces can affect inline-block without affecting the block of float.
3. Position can only cooperate with left,right to locate, if remove is overlapping; You cannot automatically extend a container with clear.
4. They all have something in common. If the parcel is a row-level element, the width can be adaptively adapted to the content width.

Usage scenarios:
Photo Wall, tab, navigation bar etc. can be used inline-block or float, recommended inline-block, but need attention to browser compatible, with float remember habitual use clear.
Tip, such as tips, suspended windows, masks, etc., it is recommended to use position.

CSS positioning layout display/float/position relationships/differences between attributes and how to use the value-taking behavior mechanism