CSS Basics (iii)--layout (top) float and position

1. Positioning (position)

The values of position are: Relative/absolute/fixed/static/inherit;

Static: for the default value of the Position property, the static element follows the normal flow of the document and ignores attributes such as top,bottom,left,right;

inherit: like the Inherit value of other CSS, which inherits the position value of the parent element (ie is not supported)

The first three values are highlighted below:

1.1 Relative positioning (relative)

Scene description (for example): The position of the second Div moves 30px relative to the right, but the position and size of the other div do not change;

• 1. The relative positioning elements follow the normal flow of documents;
• 2. Relative positioning elements cause relative changes in their position without affecting the position of other elements, size

1.2 Absolute Positioning (absolute)

Scene description (for example): After positioning the second div out of the document stream, moving to the right of 30px relative to the body, and other elements rearranged;

• 1. Absolute positioning elements out of the document flow, affecting the location of other elements, so that other elements from the new arrangement
• 2. The "wrapping" of an absolutely positioned element: the width of the second div in the document flow before positioning is full of the entire screen (here because I set the width of each div, in the browser to view elements in the document flow occupies space, can be variable width, the effect will be more obvious), after positioning its width is wide.
• 3. The absolute positioning element setting Left,top,right,bottom is relative to the parent element containing the position attribute, and if the parent element containing the position attribute is not found upward, the absolute positioning element will be positioned relative to the window;

1.3 Fixed positioning

Fixed positioning and absolute positioning have most of the same characteristics, the difference is that the above refers to the absolute positioning of the third article: fixed positioning is in any case relative to the window positioning;

2. Float (float)

For float's explanation, Zhang Xin Asahi's float has been very comprehensive, and here is a summary after watching the video

2.1 Float's initial role

When the div+css is not yet hot, the main function of float is to achieve the text wrapping effect (such as)

2.2 Float's destructive

>

Scenario Description: Compare Figure 1 (picture without floating) and Figure 2 (picture added floating) found the height of the parent element "collapsed", which is the "destructive" of float (the reason is that the elements set float out of the document flow)

2.3 Float's enveloping nature

Scenario Description: When float is not set, the width of the div fills the entire screen, and when float is set, the width of the div is automatically adjusted to the width of the package content.

2.3 Clear Float

Flaot is destructive, but we need it again, and smart engineers will naturally find a better solution: to clear the floating

• 1. Add a float to the parent element (you may be adding up to the body, which is obviously undesirable)
• 2. Add Overflow:hidden to the parent element (in some cases not: for example, you need to locate an element on the parent element that appears outside of the parent element.)
• 3.clear:both;
• 4.clearfix: This is the best solution at the moment (the code is as follows: It's no longer here, the diagram seems a bit more)

. Clearfix:after{content: "";d isplay:table;clear:both;}. Clearfix{*zoom:1;}

CSS Basics (iii)--layout (top) float and position