Introduction to the definition and usage of CSS floating and positioning

---

1. Floating

1. Floating elements

1. For floating elements, there are several points to remember:
First of all, it will be in some way The method removes floating elements from the normal flow of the document, but it will still affect the layout;
2. Adopting the unique method of CSS, floating elements are almost "in a class of their own", but they still affect the rest of the document. ;
3. When an element floats, other elements will "surround" the element. Margins around floated elements are not merged.
4. Not floating: float:none is used to prevent elements from floating.

2. The detailed inside story of floating

Before we understand the contents of floating in detail, we must first know what a containing block is.
The containing block of a floating element is its nearest block-level ancestor element.
css provides a series of rules to control the placement of floating elements:

• The left (or right) outer boundary of a floating element cannot exceed the left (or right) edge of its containing block ) inner boundary;

• The left (or right) outer boundary of the floating element must be the right (or left) outer boundary of the left floating (or right floating) element that previously appeared in the source document , unless the top of the later floated element is below the bottom of the first floated element.

• The left-floated element's right outer border will not be to the right of the right-floated element's outer border.

• The top of a floating element cannot be higher than the inner top of its parent element;

• The top of a floating element cannot be higher than all previous floats The top of an element or block-level element is higher.

• If a floated element precedes another element in the source document, the top of the floated element cannot be higher than the top of any line box containing the box generated by the element

• There is another floating element to the left (right) of the left (or right) floating element, and the right outer boundary of the former cannot be to the right (left) of the right (left) boundary of its containing block

• Floating elements must be placed as high as possible

• The left floating element must go as far to the left as possible, and the right floating element must go as far to the right as possible.

3. Practical behavior

First, let’s take a look at what happens when a floating element is taller than its parent element.
css2.1 clarifies one aspect of the behavior of floated elements: floated elements stretch to include all of their descendant floated elements. So, by setting the parent element as a floating element, you can include the floating element within its parent element.

4. Negative margins

Negative margins may cause floating elements to move outside of their parent elements. By setting negative margins, an element may appear wider than its parent, in the same way that a floated element may appear wider than its parent.
It seems that this rule seems to contradict the previous one (the floating element is placed outside its parent element);
But if you carefully study the rules in the previous section, you can find that this is actually technically Allowed, the outer bounds of a floated element must be within the parent element, but because the margins are negative, the content of the floated element is placed as if it covers its own outer bounds.

5. Floating elements, content and overlap

There is also an interesting question, what happens if a floating element overlaps the content in the normal flow?
css2.1 specifies the following rules:

• When an inline box overlaps a floating element, its border, background, and content are all displayed "on top" of the floating element.

• When a block box overlaps a floating element, its border and background are displayed "below" the floating element, and the content is displayed "above" the floating element.

6. Clear

Sometimes, we may not always want content to flow through floating elements. In some cases, we may want to deliberately avoid this behavior. For example:
To ensure that all h3 elements are not placed to the right of the left floating element, you can set h3{clear:left;}. This can be understood as "make sure there is no floating image on the left side of an h3";

2. Positioning

1. Basic concept

Using positioning, you can accurately define the relative elements of the frame Where it should appear relative to its normal position, or to set the position of the browser window itself relative to a parent element or another element.

2. Positioning type

• static (initial value):
  The element box is generated normally, and the block-level element generates a rectangular box as part of the document flow. , an inline element will create one or more line boxes and place them within its parent element.

• relative:
  The element box is offset by a certain distance. The element retains its unpositioned shape and the space it originally occupied.

• absolute:
  The element box is completely removed from the document flow and positioned relative to its containing block, which may be another element in the document or the initial containing block. The space previously occupied by the element in normal document flow is closed, as if the element did not exist. A block-level box is generated after the element is positioned, regardless of what type of box it originally generated in the normal flow.

• #fixed:
  The element box behaves like setting position to absolute, but its containing block is the window itself.

3. Containing block

For floating elements, the containing block is defined as the nearest block-level ancestor element.
For positioning, the situation is more complicated:
- The containing block (also called the initial containing block) of the "root element" is established by the user agent. In HTML, the root element is the html element, but some browsers use body as the root element.
- For a non-root element whose position value is relative or static, the containing block is bounded by the content of the nearest block-level box, table cell, or inline block ancestor box.
- For a non-root element, if its position value is absolute, the containing block is set to the nearest ancestor element whose position value is not static.

4. Offset attribute

We have introduced three positioning mechanisms and use four attributes to describe the offset of each side of the positioning element relative to its containing block. We call these four properties offset properties, which are an important part of completing positioning.
- For top and bottom, relative to the height of the containing block
- For right and left, relative to the width of the containing block
These properties describe the offset from the nearest edge of the containing block, so it is also named offset.

5. Width and height

Set width and height

If you want to specify a specific width for a positioned element, you must obviously use the width attribute. Similarly, use height, It is also possible to declare a specific height for positioned elements.

Limit width and height

You can use min-width and min-height to define a minimum size for the content area of ​​the element.
Similarly, you can also use the attributes max-width and max-height to limit the size of elements.

6. Content overflow and clipping

Overflow

Suppose that for some reason, an element is fixed to a specific size, but the content cannot fit in the element. At this time You can use the overflow attribute to control this situation;
- visible:
Default value, indicating that the content of the element can also be seen outside the element box. Typically, this causes the content to extend beyond its own element box, but does not change the shape of the box.
- hidden:
The content of the element will be cropped at the boundary of the element box, and no scrolling interface will be provided to allow users to access content beyond the clipping area;
- scroll:
The element's content is clipped at the bounds of the element's box, but a scrolling mechanism is provided for the user to use.

7. Content clipping

If the content of an absolutely positioned element overflows its content box, and overflow is set to require clipping of the content, the shape of the clipping area can be changed by using the clip attribute.
clip:rect(top,right,bottom,left);

8. Element visibility

In addition to clipping and overflow, you can also control the visibility of the entire element.
visibility:
- visible visible
- hidden Invisible.
-collapse
- inherit
visibility:collapse When used within a table element, this value removes a row or column, but it does not affect the layout of the table. The space occupied by rows or columns is made available for other content. If this value is used on another element, it will be rendered as "hidden".
visibility:hidden When an element is in the "invisible" state by setting visibility, the element will still affect the layout of the document as if it were still visible. In other words, the element is still there, you just can't see it. This is different from display:none, which is not only invisible. It will also be deleted from the document, so it will have no impact on the document layout.

9. Absolute positioning

Containing blocks and absolutely positioned elements

When an element is absolutely positioned, it will be completely deleted from the document flow. It is then positioned relative to its containing block. This means that absolutely positioned elements may cover other elements, or be covered by other elements.
The containing block of an absolutely positioned element is the nearest ancestor element whose position value is not static. Creators usually select an element as the containing block of an absolutely positioned element, specify its position as relative and have no offset.

Auto edge offset

The general meaning of the term static position of an element is: the original position of the element in the normal flow. More specifically, the "top" static position is the distance from the top edge of the containing block to the top margin edge of the imaginary box.

10. Placement and size of non-replaced elements

Generally, the size and position of an element depends on its containing block. The value of each attribute will also have some influence, but the most important one is its containing block.

11. Placement and size of replaced elements

The positioning rules for non-replaced elements and replaced elements are quite different. This is because the replaced element has an inherent height and width, so its size will not change.
When determining the position and size of a replaced element, the behavior involved is most easily described by the following rules:
- If width is set to auto, the actual width used is determined by the inherent width of the element's content.
- In languages ​​that read from left to right, if the value of left is auto, replace auto with a static position. The same applies from right to left;
- If left or right is still auto, replace the auto value of margin-left or margin-right with 0;
- If margin-left and margin-right are both defined as auto at this time, set them to equal values, thereby centering the element in its containing block;
- After this, if there is only one auto value left, modify it to be equal to the rest of the equation.

12. Placement on the Z axis

Controlled by the attribute z-index

13. Fixed positioning

Fixed positioning is very similar to absolute positioning. It's just that the containing block of the fixed element is the window. With fixed positioning, the element is completely removed from the document flow and has no position relative to any part of the document.

14. Relative positioning

The simplest positioning mechanism to understand is relative positioning. When this mechanism is adopted, the positioned element is moved by using the offset attribute.

The above is the detailed content of Introduction to the definition and usage of CSS floating and positioning. For more information, please follow other related articles on the PHP Chinese website!