Home > Article > Web Front-end > Detailed instructions on CSS floating and positioning
Detailed description of CSS floating and positioning
Document flow refers to the process of element typesetting and layout, where elements will automatically flow from left to right and top to bottom. arrangement. And finally the form is divided into rows from top to bottom, and the elements are arranged in order from left to right in each row. Breaking out of the document flow means that the element disrupts this arrangement, or is taken away from the layout.
Methods to get elements out of the document flow are: floating and positioning.
CSS positioningThere are four methods: default positioning (static), relative positioning (relative), absolute positioning (absolute) and fixed Positioning (fixed)
static: Default value. There is no positioning, the element is in the normal flow, top, right, bottom, left and z-index attributesinvalid. Examples are as follows:
2. The position of an absolutely positioned element is relative to the nearest positioned ancestor element. If the element has no positioned ancestor element, its position is relative to the body; 3. Absolutely positioned Boxes can cover other elements of the page. Example: This situation is when the parent element closest to box2 has been positioned. If the parent element closest to box2 is not positioned, example As follows:
navigation at the top of many websites, fixed advertisements in the lower right corner, etc.
The reference point of absolute offset is: relative to the nearest positioned parent element, if not, relative to the body element;
The reference point of relative offset is: relative to the element The original position in the normal stream; the reference point of the
fixed offset is: relative to the browser window.
The z-index attribute is used to set the stacking order of nodes. Nodes with higher stacking order will be displayed in lower stacking order. in front of the node.
Usage: Example
##1.z-index is only valid for positioned elements (position: relative||absolute||fixed);2.z-index can only compare elements of the same level5. Both position: relative and negative
Inline elementsSupport width and height;
3.Whether it is a block element or an inline element, when there is no width, the default content will expand the width;4. Break away from the document flow; 5. Increase the level by half a level.FLOAT)
(such as Firefox), when the height of the container is auto and the content of the container is There are floating elements (float is left or right). In this case, the height of the container cannot automatically extend to adapt to the height of the content, causing the content to overflow outside the container and affect the layout. In order to prevent this phenomenon from occurring, The CSS processing performed is called CSS clear float. Methods to clear floats:
1. Use empty elements with
clear attributes Use an empty element after the floating element such as 2. Use the overflow attribute of CSS to add overflow:hidden; or overflow:auto; to the container of the floating element to clear the float. In addition, it is also required in IE6 Trigger hasLayout, such as setting the container width and height for the parent element or setting zoom:1. 3. Use CSS :afterpseudo-element Additional: I have never quite understood the use of clear:both to clear floats, and there is also the method of clearing floats. I misunderstood. I thought that after clearing floats, the rendering order of elements is the same as that of ordinary flow. This is not actually the case. Here is my own understanding. If there are any deficiencies, everyone is welcome to criticize and correct me. About floating In the following code: Add a background in the parent containerPicture , the image will be rendered according to the normal flow If you add float to the background image on this basis, the effect will be as follows: We can see that the height of the parent element has collapsed and the background image is out of the document flow, so at this time the parent container p has replenished its height. Let us add some text to the parent container to see its height change The height of the parent container has been stretched, is there any! Is there any! So the reason why the child element floats and the parent element collapses is: because the p height is not set in advance, the p height is determined by the height of the child element it contains. Floating is out of the document flow, so the height of the image is not calculated. At this time, in p, it is equivalent to the height of the neutron element in p being 0. A problem that has troubled me for a long time, I would like to share it with you and give you the code: <p class="clear"></p>
, and assign .clear{clear:both;} in CSS
Properties can be used to clean up floats. You can also use <br class="clear">
or <hr class="clear">
to clean.
Clear :both; In fact, we use clear float to open the outer p. So sometimes, after we set all the inner p to float, we will find that the background of the outer p is not displayed. The reason is that the outer p It's not stretched out and is too small, so the visible background is limited to a line. Examples are as follows:
I have just said this much about CSS floating and positioning. If there are any deficiencies, you are welcome to correct me.
The above is the detailed content of Detailed instructions on CSS floating and positioning. For more information, please follow other related articles on the PHP Chinese website!